Question

我创建了一个脚本，根据前一个选择框中选择的内容填充包含内容的选择框。脚本本身运行完美，但我还有一个问题。

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

所以我们说：

Selectbox1（非动态）： - Apple（已选中） - 三星 - 华为

Selectbox2（动态内容）： - Ipad - Iphone（已选中） - Ipod

Selectbox3（动态内容）： - Iphone3 - Iphone4 - Iphone5（已选中）

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

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

我试过这个：

var $select = $('#id-from-selectbox'); 然后使用以下命令更新选择框： $select.trigger('update')

您可以在此处查看脚本 - ＆gt; 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模拟更改时，该行也应该运行。这是一种连锁反应。第一个选择导致第二个选择change，第二个选择导致第三个选择change，依此类推。

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

1 个答案: