使用javascript的动态选项

Dynamic option using javascript

本文关键字：选项 动态 javascript 使用      更新时间：2023-09-26

I尝试在combo box 中构建动态option

例如，在我的情况下，我使用4组合框，对于选项（1/2/3/4），如果用户选择选项1，那么对于下一个组合框，选项1将消失，并且仅可用（2/3/4）。

b1:12,3,4

b2:12,3,4

b3:12,3,4

b4:1,2,3,4

如果在b1中用户选择数字1，那么对于b2-b4，它只有3个选项（2-3-4），并保持重复直到b4（b2选择3，那么b3和b4只有2个选项，它是（2和4），接下来如果b3选择4，那么最后一个组合框（b4）只有1个选项，这是（2））

HTML:

<select id="b1" name="b1">
       <option value="1">1</option>
       <option value="2">2</option>
       <option value="3">3</option>
       <option value="4">4</option>
</select>
    <select id="b2" name="b2"></select>
    <select id="b3" name="b3"></select>
    <select id="b4" name="b4"></select>

Javascript：

<script src="jquery-1.9.1.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        var szTr ;
        var a = new Array('1','2','3','4');
        $( '#b1' ).on( 'change', function( e ) {
            for(i=0; i<a.length; i++)
            {
                if(a[i] == e.value)
                {
                    unset(a[i]);
                }
                else
                {
                    szTr = szTr + "<option>" + a[i] + "</option>";
                }
            }
            $('#b2').append(szTr);
        });
        $( '#b2' ).on( 'change', function( e ) {
            // same code like b1
        });
    });

我尝试在array (1,2,3,4)中构建，然后检查相同的unset是否为下一个combobox的其他append。

但它失败了，每次选择选项时都重复该选项，（2次选择）下一个组合框选项（1,2,3,4,1,2,3,4）Jsfidle

我真的很感激你的帮助。

  1. 选择当前选定的选项
  2. 遍历除this选择和hide()匹配选项之外的所有其他选择选项

试试这个：

$('select').on('change', function() {
  var selected = $(this).find('option:selected').text();
  $('select').not(this).find('option').each(function() {
    if ($(this).text() == selected) {
      $(this).hide();
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select id="b1" name="b1">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</select>
<select id="b2" name="b2">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</select>
<select id="b3" name="b3">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</select>
<select id="b4" name="b4">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</select>

Fiddle here

相关文章：