Question

所以我每行有三个下拉列表（选择），包含从1到20的数字。第一个选择定义行中其他两个选择的项目数。即，从1-20号...如果用户在第一次选择中选择4，则另外两个选择应该只有4个项目。见附件屏幕。题：实现这一目标的最佳方法是什么？因为这将在很多地方被复制，几乎没有变化，所以通用解决方案是我的最终目标......我将传递主要选择ID（使用onchange属性），其余的兄弟姐妹将得到更新。 VanillaJS / jQuery ......并不重要。谢谢。小提琴：http：//jsfiddle.net/asadmalik/7aNRZ/721/ ＆＃13; ＆＃13; function updateDependent（elem）{＆＃13; console.log（＆＃34; id：＆＃34; + elem.id）;＆＃13; console.log（＆＃34;值：＆＃34; + elem.value）;＆＃13; ＆＃13; console.log（＆＃39;兄弟姐妹长度：＆＃39; + $（this）.siblings.length）;＆＃13; ＆＃13; var mySelect = $（＆＃39; #protect＆＃39;）;＆＃13; $ .each（myOptions，function（val，text）{＆＃13; mySelect.append（＆＃13; $（＆＃39;＆LT;选项＆GT;＆LT; /选项＆GT;＆＃39）。VAL（VAL）的.html（文本）＆＃13; ）;＆＃13; }）;＆＃13; ＆＃13; }＆＃13; ＆lt; select id =＆＃34; clean＆＃34;平变化=＆＃34; updateDependent（本）＆＃34;＆GT;＆＃13; ＆lt; option value =＆＃34; 1＆＃34;＆gt; 1＆lt; / option＆gt;＆＃13; ＆lt; option value =＆＃34; 2＆＃34;＆gt; 2＆lt; / option＆gt;＆＃13; ＆lt; option value =＆＃34; 3＆＃34;＆gt; 3＆lt; / option＆gt;＆＃13; ＆lt; option value =＆＃34; 4＆＃34;＆gt; 4＆lt; / option＆gt;＆＃13; ＆lt; option value =＆＃34; 5＆＃34;＆gt; 5＆lt; / option＆gt;＆＃13; ＆lt; option value =＆＃34; 6＆＃34;＆gt; 6＆lt; / option＆gt;＆＃13; ＆lt; option value =＆＃34; 7＆＃34;＆gt; 7＆lt; / option＆gt;＆＃13; ＆lt; option value =＆＃34; 8＆＃34;＆gt; 8＆lt; / option＆gt;＆＃13; ＆＃13; ＆LT; /选择＆GT;＆＃13; ＆＃13; ＆lt; select id =＆＃34; protect＆＃34;＆gt;＆＃13; ＆LT; /选择＆GT;＆＃13; ＆lt; select id =＆＃34; deodorize＆＃34;＆gt;＆＃13; ＆LT; /选择＆GT;＆＃13; ＆＃13; ＆＃13;

Answer 1

您可以根据第一个选择中的选定值克隆选项。

$('#clean').on('change', function (e) {
    $('#protect').empty().append($(this).clone().find('option:lt(' + this.value + ')')).val('1');
    $('#deodorize').empty().append($('#protect').clone().find('option')).val('1');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<select id="clean">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>

</select>

<select id="protect">
</select>
<select id="deodorize">
</select>

如何将特定数量的<option>项从一个<select>复制到另一个<select>？

1 个答案: