0

您好，感谢您花时间回答我的问题。

我有一个带有两个选择元素的 div（请注意，它们是动态创建的并且没有 id）。它们都包含相同的选项元素（从 1 到 5 的技能级别）。当用户从 SelectFrom 下拉框中选择某些内容时，第二个选项 (Select To) 仅包含值大于 Select From 中所选值的选项。

如果用户在 Select From 下拉框中选择默认元素（没有值），我想用 5 个元素重新填充 Select to。

我发现我将拥有一个包含所有 5 个选项的隐藏选择元素，我将克隆这些元素并将 Select to Dropbox 重新填充。

前进的方向是什么。棘手的部分是我没有 ID，所以我正在使用 parent() 和兄弟姐妹()。谢谢你的时间

假设这是 HTML：

<div>
<select class="skillsFrom">
<option value="">Please select a value</option>
<option value="1">a</option>
<option value="2">a</option>
<option value="3">a</option>
<option value="4">a</option>
<option value="5">a</option>
</select>
<select class="skillsTo">
<option value="">Please select a value</option>
<option value="1">a</option>
<option value="2">a</option>
<option value="3">a</option>
<option value="4">a</option>
<option value="5">a</option>
</select>
</div>

这是 JS：//btw helperSelect 是一个与其他两个选项相同的选择，它只是被隐藏了。

('.skillsFrom').bind('change', function(){

            var $optionsSkillLevel = $('#helperSelect option').clone();

            var selectedValue = $(this).val();

            $(this).parent().siblings('.skillsTo').html($optionsSkillLevel);

            if(selectedValue != ''){

            }

        });

我被困住了。我不知道如何从这里开始。我想遍历 Select To 中的所有元素并从 Select From 中删除那些低于所选值的元素

4

2 回答 2

1

在第一个选择的每次更改中，您都需要隐藏/显示第二个选择的某些选项。

$('.skillsFrom').change(function() {
    var theValue = $(this).val();
    if($(this).val()==="") {
        // show all values of .skillsTo if .skillsFrom select is set to ""
        $(this).parent().find('.skillsTo option').show();
    } else {
        theValue = parseInt(theValue, 10);
        $(this).parent().find('.skillsTo option').each(function() {
           if(parseInt($(this).val(), 10) <= theValue) {
               // hide if value <= selected value from .selectFrom
               $(this).hide();
           } else {
               // show if value > selected value from .selectFrom
               $(this).show();
           }
        });
    }
});
于 2012-09-27T09:22:38.147 回答
0

你可以这样做：

$('.skillsFrom').change(function() {
  var val = this.value;
  if(val == '') {
    // your reload logic here
  }
  else {
    $('.skillsTo option').hide().filter(function() {
        return this.value != '' && parseInt(this.value, 10) > parseInt(val, 10);
    }).show();
  }
});
于 2012-09-27T09:24:41.920 回答