简体   繁体   English

jQuery附加选项以选择并获取所选值

[英]Jquery append option to select and get the selected value

Having trouble with this part. 这部分有麻烦。 I have a select populated with asp.net mvc and 2 other empty select that is populated by jquery 我有一个用asp.net mvc填充的选择和由jQuery填充的其他2个空选择

<select id="Type" onchange="GetClassification(this.value);">
    @foreach (var item in Type)
    {
      <option value="@item.TypeID">@item.TypeName</option>
    }
</select>

<select id="Classification" onchange="GetDescription(this.value);">
</select>

<select id="Description" onchange="GetDescriptionTips(this.value);">
</select>

So based on first select it populates the sencond, based on second it populates the third. 因此,根据第一个选择填充第二个,基于第二个选择填充第三个。 First one populates right, second one populates right, third one doesn't populate on document ready. 第一个填充正确,第二个填充正确,第三个没有在准备好的文档上填充。

   $(document).ready(function () {
      $(function () {
         var type = $("#Type option:selected").val();
         GetClassification(type);
      });
    });

    function GetClassification(typeID) {
        $.ajax({
            type: 'GET',
            url: '/types/Classification',
            data: { typeID: typeID },
            cache: false,
            success: function (data) {
                $('#Classification option').remove();
                $.each(data, function (index, val) {
                    var optionTag = $('<option></option>');
                    $(optionTag).val(val.ClassificationID).text(val.ClassificationName);
                    $('#Classification').append(optionTag);
                });
            }
        });
    var classification = $("#Classification option:selected").val();
    GetDescription(classification);
}

function GetDescription(classificationID) {
    $.ajax({
        type: 'GET',
        url: '/types/Description',
        data: { classificationID: classificationID },
        cache: false,
        success: function (data) {
            $('#Description option').remove();
            $.each(data, function (index, val) {
                var optionTag = $('<option></option>');
                $(optionTag).val(val.DescriptionID).text(val.DescriptionName);
                $('#Description').append(optionTag);
            });
        }
    });
}

After load page, if I select second one it changes the third one right, but if change the first, it only changes the second. 加载页面后,如果选择第二个,则会更改第三个权利,但是如果更改第一个,则只会更改第二个权利。 What I need is on load populate the second and third, then on change the first, re populate the second and third, and on change the second re-populate the third. 我需要的是在加载时填充第二个和第三个,然后在更改第一个,重新填充第二个和第三个,并在更改第二个时重新填充第三个。

I can see it doesn't assign selected on any stage, so I am not sure if need assign it. 我可以看到它在任何阶段都不会分配所选内容,因此我不确定是否需要分配它。

Hope I explained good. 希望我能解释得很好。

Any help will be appreciated. 任何帮助将不胜感激。

First of all try to follow this Don't repeat yourself , here is simple algo: 首先,请尝试遵循此操作。 不要重复自己 ,这是简单的算法:

1.Choose all selects
2.Create only one ajax function and pass params like url, data, etc to it
3.In success function proccess your response from the server
4.find all next selects and clean them up or remove options as u wish

good luck! 祝好运!

Since you are using jQuery, try using the .on('chang', function(){...) event handler. 由于您使用的是jQuery,请尝试使用.on('chang', function(){...)事件处理程序。 Because you are changing the DOM and the on() method can detect the change event even the DOM changed after document ready. 因为您正在更改DOM,所以on()方法可以检测到更改事件,甚至在文档准备就绪后DOM也已更改。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM