javascript - 动态选择框的选择更新功能

Question

我创建了一个脚本，根据前一个选择框中选择的内容来填充选择框。脚本本身运行得很好，但我还剩下一个问题。

当我在 selectbox2 中选择某些内容时，selectbox3 就会填充内容。然而问题是，当我决定再次更改 selectbox2 时，我无法选择 slectbox3 的第一个选项。

所以可以说:

Selectbox1(非动态):- 苹果(选定)- 三星- 华为

Selectbox2(动态内容):- 平板电脑- iPhone(已选)- iPod

Selectbox3(动态内容):- iPhone3- iPhone4- Iphone5(已选)

所以现在我在 selectbox3 中。当我决定将 Selectbox1 或 Selectbox2 更改为其他内容时，选择框不会更新为新选择的选项。

我已经阅读了一些有关此内容的内容，我认为它与 trigger('update') 函数有关。

我尝试过:

var $select = $('#id-from-selectbox');然后用以下内容更新选择框:$select.trigger('更新')

您可以在此处查看正在运行的脚本 -> here (在“wat zoekt u？”下)

我真的完全被这个问题困住了。欢迎任何帮助!

所以我的 HTML:

<form action="" method="post" name="compatible">
    <div class="zoeken-select">
        <div id="optieEen" class="zoeken-value">Selecteer een merk</div>
        <div class="zoeken-handle"></div>
        <select id="changeEen" name="changeEen" class="gui-validate selector">
            <option value="" disabled="" selected="">Selecteer een merk</option>
            <option id="1782331" value="1782331">Apple</option>
            <option id="1782359" value="1782359">BlackBerry</option>
            <option id="1782401" value="1782401">HTC</option>
            <option id="1782485" value="1782485">Huawei</option>
            <option id="1782509" value="1782509">LG</option>
            <option id="1782577" value="1782577">Motorola</option>
            <option id="1782587" value="1782587">Nokia</option>
            <option id="1782735" value="1782735">Samsung</option>
            <option id="1782889" value="1782889">Sony Ericsson</option>
            <option id="1782937" value="1782937">Sony</option>
        </select>
    </div>
    <div class="zoeken-select">
        <div id="optieTwee" class="zoeken-value">Selecteer een serie</div>
        <div class="zoeken-handle"></div>
        <select class="gui-validate selector" name="changeTwee" id="changeTwee">
            <option selected="" disabled="" value="">Selecteer een serie</option>
        </select>
    </div>
    <div class="zoeken-select">
        <div id="optieDrie" class="zoeken-value">Selecteer een model</div>
        <div class="zoeken-handle"></div>
        <select class="gui-validate selector" name="changeDrie" id="changeDrie">
            <option selected="" disabled="" value="">Selecteer een model</option>
        </select>
    </div>
    <div class="zoeken-select">
        <div id="optieVier" class="zoeken-value">Selecteer een onderdeel</div>
        <div class="zoeken-handle"></div>
        <select class="gui-validate selector" name="changeVier" id="changeVier">
            <option selected="" disabled="" value="">Selecteer een onderdeel</option>
        </select>
    </div> <a title="Inloggen" href="#" onclick="go_category();" class="zoekbtn btn btn-custom">Search</a>

</form>

var categoryUrl = '';
$('#selector-widget .selector').change(function () {
    var selectVal = $(this).val();
    var selectName = $(this).attr('name');

    $.getJSON('link-to-json?format=json', function(data){
            $.each(data.shop.categories, function(i, category) {
              var mainCatId = category.id;
              if(selectName == 'changeEen') {
                $("#optieEen").html($("#changeEen option:selected").text());
                if(category.id == selectVal) {
                  categoryUrl = category.url;
                  $('#changeTwee .cat-new').remove();
                  if(category.subs) {
                    var $select = $('#changeTwee');
                    $.each(category.subs, function(i, category) {
                      $('#changeTwee').append('<option class="cat-new" value="'+category.id+'">'+category.title+'</option>');
                    });
                    $select.trigger('update');
                  }
                }
              } else {
                if(category.subs) {
                  $.each(category.subs, function(i, category) {
                    if(selectName == 'changeTwee') {
                      $("#optieTwee").html($("#changeTwee option:selected").text());
                      if(category.id == selectVal) {
                        categoryUrl = category.url;
                        $('#changeDrie .cat-new').remove();
                        if(category.subs) {
                          var $select = $('#changeDrie');
                          $.each(category.subs, function(i, category) {
                            $('#changeDrie').append('<option class="cat-new" value="'+category.id+'">'+category.title+'</option>');
                          });
                          $select.trigger('update');
                        }
                      }
                    } else {
                      if(category.subs) {
                        $.each(category.subs, function(i, category) {
                          if(selectName == 'changeDrie') {
                            $("#optieDrie").html($("#changeDrie option:selected").text());
                            if(category.id == selectVal) {
                              categoryUrl = category.url;
                              $('#changeVier .cat-new').remove();
                              $.getJSON(categoryUrl+'/?format=json', function(data) {
                                var $select = $('#changeVier');
                                $.each(data.collection.filters.custom, function(index, filter) {
                                  if(filter.id == '9041') {
                                    $.each(filter.values, function(index, value) {
                                      $('#changeVier').append('<option class="cat-new" value="'+value.id+'">'+value.title+'</option>');
                                    });
                                  }
                                });
                                $select.trigger('update');
                              });                                     
                            }
                          } else {
                            if(selectName == 'changeVier'){
                              $("#optieVier").html($("#changeVier option:selected").text());
                              if(category.subs) {
                                $.each(category.subs, function(i, category) {
                                  $('#changeVier').append('<option class="cat-new" value="'+category.id+'">'+category.title+'</option>');
                                });
                              }
                            }
                          }
                        });
                      }
                    }
                  });
                }
              }        
            });  
          });
});

function go_category() {
    if ($("select#changeVier").val() != '') {
        categoryUrl = categoryUrl + '/?filter[]=' + $("select#changeVier option:selected").val();
    } else {
        categoryUrl = categoryUrl;
    }
    window.location = categoryUrl;
}

Answer 1

更改此行

$select.trigger('update');

对此:

$select.val(null).trigger('change')

我想你已经准备好了。

.val(null) 清除已存在的所有选择，而 'change' 是更新显示所选值的 div 的正确事件。

编辑:

通过调用.trigger('change')，我们模拟用户在选择框上进行更改。由于该行位于 select 的 change 事件的处理程序中(以便在用户进行更改时运行)，因此该行也应该在前一个 select 模拟更改时运行。这是一个链式 react 。第一个选择导致第二个更改，第二个导致第三个更改，依此类推。