如何为表单的 <select> 关系应用 if 语句

Posted 2023-05-09

【中文标题】如何为表单的 <select> 关系应用 if 语句

【英文标题】：how to apply if statement for form's <select> relation

【发布时间】：2016-05-04 10:03:29

【问题描述】：

实际上，我想做这个： 我的表单中有 2 个带有一些选项的选择字段，我想要：如果首先我选择一个选项（例如 id="2"），第二个选择字段更改自动注意第一个字段选择的选项。

<form>
<select>
   <option id="1"></option>
   <option id="2"></option>
   <option id="3"></option>
</select>
   #in here if select option with 1 id show select field with 1th id:
<select id="1th">
    #options here...
</select>

   #if select option with 2 id show select field with 2th id:
<select id="2th">
    #options here...
</select>

   #if select option with 3 id show select field with 3th id:
<select id="3th">
    #options here...
</select>
</form>

（通过更改表单选择字段来更改表单其他字段）。

如果你可以用 jquery 做到这一点。它甚至会更好。 谢谢。

【问题讨论】：

这称为连接选择。

不要使用以数字开头的id。

请写出到目前为止你尝试过的内容。

【参考方案1】：

使用jQuery和第一个选择元素的值，这很容易创建。

<select id="first-select">
   <option value="1"></option>
   <option value="2"></option>
   <option value="3"></option>
</select>

注意：不要像以前那样使用 id，而是使用值。 对于每个子选择，添加一个 id 和一个类，我们将使用它们来显示和隐藏正确的选择。

<select id="select-1" class="hideIfNotSelected">
    #options here
</select>

然后使用这个 jQuery。

<script type="text/javascript">

$(document).ready(function()

    $("#first-select").on('change', function(event) 
         var selected = this.val();

         $(".hideIfNotSelected").hide(); //hide all selects
         $("#select-"+ selected).show(); //show only the selected select.
    );

);

</script>

【参考方案2】：

你可以从这个开始：

$(function () 
  var sel_1 = ["", "One", "Two", "Three"];
  var sel_2 = [
    [""],
    ["", "One-One", "One-Two", "One-Three"],
    ["", "Two-One", "Two-Two", "Two-Three"],
    ["", "Three-One", "Three-Two", "Three-Three"]
  ];
  // Build it for select 3 yourself.
  $("#sel-1").html(function () 
    var final = "";
    $.each(sel_1, function (i, v) 
      final += "<option value='" + i + "'>" + v + "</option>";
    );
    return final;
  ).change(function () 
    reset(2);
    var final = "";
    $.each(sel_2[$(this).val()], function (i, v) 
      final += "<option value='" + i + "'>" + v + "</option>";
    );
    $("#sel-2").html(final).off("change").change(function () 
      $("#sel-3").html('');
    );
  );
  function reset(sel) 
    if (sel == 2)
      $("#sel-2, #sel-3").html("");
    else if (sel == 3)
      $("#sel-3").html('<option value="item-2">Item 1</option><option value="item-3">Item 2</option><option value="item-4">Item 3</option>');
  
);

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<select name="sel-1" id="sel-1"></select>
<select name="sel-2" id="sel-2"></select>
<select name="sel-3" id="sel-3"></select>