问题
Started a new question as the problem has moved. You can read how we came to this in this post. stackoverflow.com/questions/60379943
I now have working code but for some reason the script formatting is interfering with the population of the drop-down select list. I can get the list to populate on the view by removing this code from the page.
$(function () {
$('select').searchableOptionList({
maxHeight: '250px'
});
});
All this does is make the drop-down list formatted to a style and the select list is radio buttons. For some reason this is making my drop-down mot populate. I am thinking that it may be a "What gets loaded first" issue. This code is at the top of the razor page where my Javascript is at the bottom. I really do not want to lose the styling of the drop-down. This is a part of what is called "NiceDropdown".
Hopefully someone has some insight on this and can help remedy the issue.
The last post that is linked above has all the code in it. I didn't want to repeat code in another question.
Thanks for your help!
UPDATE: While reading up on this plugin. In order to use it you have to format the call with "searchableOptionList". Need to find a way to incorporate an onchange and use the option above..
UPDATE: Here is the code i have tried from original to trying to convert.
Original:
$(function () {
$('#ddlCountry').change(function () {
//debugger;
$.ajax({
type: "post",
url: "/States/Add",
data: { id: $('#ddlCountry').val() },
datatype: "json",
traditional: true,
success: function (data) {
$.each(data, function (index, value) {
$('#ddlState').append('<option value="' + value.StateId + '">' + value.StateName + '</option>');
});
}
});
});
What i have added that doesn't seem to work:
$(function () {
$('#ddlCountry').change(function () {
//debugger;
$.ajax({
type: "post",
url: "/States/Add",
data: { id: $('#ddlCountry').val() },
datatype: "json",
traditional: true,
success: function (data) {
$.each(data, function (index, value) {
$('#ddlState').searchableOptionList(data);
});
}
});
});
Other options:
success: function (data) {
$.each(data, function (index, value) {
$('#ddlState').searchableOptionList('<option value="' + value.StateId + '">' + value.StateName + '</option>');
});
}
success: function (data) {
$(function (index, value) {
$('#ddlState').searchableOptionList(data, (index, value));
});
}
success: function (data) {
$(function () {
$('#ddlState').searchableOptionList({
data: (data)
});
});
}
UPDATE: I am close, This almost works. However i lose the formatting of the select lists and gain the formatting in the states when a country is selected..
$('#ddlCountry').change(function () {
//debugger;
$.ajax({
type: "post",
url: "/States/Add",
data: { id: $('#ddlCountry').val() },
datatype: "json",
traditional: true,
success: function (data) {
$.each(data, function (index, value) {
$('#ddlState').append('<option value="' + value.StateId + '">' + value.StateName + '</option>');
});
$(function () {
$('#ddlState').searchableOptionList();
});
}
});
});
UPDATE: The issue with this is there is very little documentation on the Searchable-Option Plugin. The current code will not work or at least i cannot get it to work. I have to use .change and the plugin requires .searchableOptionList. If the code can be reconfigured so that the .searchableOptionList uses the portion of the success: function as data it will work. But this has to be outside of the .change function so that the styling will remain. The last portion of my code that i posted changes the styling on change. I need the styling to be there the whole time.
Thanks to whomever re-opened my question!
回答1:
After reading up on the select option plugin i have come to the conclusion that there is no need for that in a cascading select drop-down. The purpose of the plugin is to multi-select options from a drop-down. You would never need that in this case.
I have achieved the look i wanted so that it flows with the rest of the project with CSS.
Here is the code: Do not use any functions from the Select Option.
<div class="form-group sol-container">
@Html.LabelFor(model => model.Country, htmlAttributes: new { @class = "control-label" })
@Html.DropDownListFor(model => Model.Country, Model.Countries, "---Select Country---", new { @class = "form-control sol-inner-container ", @id = "ddlCountry" })
@Html.ValidationMessageFor(model => model.Country, "", new { @class = "text-danger" })
</div>
<div class="form-group sol-container">
@Html.LabelFor(model => model.State, htmlAttributes: new { @class = "control-label col-md-2" })
@Html.DropDownListFor(model => model.State, new List<SelectListItem>(), "---Select State---", new { @class = "form-control sol-inner-container ", @id = "ddlState" })
@Html.ValidationMessageFor(model => model.State, "", new { @class = "text-danger" })
</div>
<div class="form-group sol-container">
@Html.LabelFor(model => model.City, htmlAttributes: new { @class = "control-label col-md-2" })
@Html.DropDownListFor(model => model.City, new List<SelectListItem>(), "---Select City---", new { @class = "form-control sol-inner-container", @id = "ddlCity" })
@Html.ValidationMessageFor(model => model.City, "", new { @class = "text-danger" })
</div>
The CSS that was added comes from the sol.css that comes with this plugin.
Hope this helps others out before they go through this long process that i did. This was also a question that was asked on the GitHub site for this plugin and was never answered.
来源：https://stackoverflow.com/questions/60386156/c-sharp-asp-net-cascading-drop-down-select-lists-using-searchable-options-list-p