javascript - 根据用户选择隐藏字段？

Question

是否可以根据用户的回答隐藏选择字段中的选项？使用 Javascript/jQuery。

我有一个相当复杂且冗长的格式，如果可能的话，我想尽量避免加载大量 HTML 元素，因为条件逻辑会变得非常混乱。

所以用户会遵循类似这样的操作： 1. 第一步：选择颜色（红、蓝、绿、橙）。2. 第二步：选择一个数字（1、2、3、4、5、6）。根据在第一个字段中选择的颜色显示不同的数字。3. 第三步：按钮显示带有链接异地，链接将依赖于第一步，然后是第二步。

选择的示例可能是：1. 选择红色（红色、蓝色、绿色、橙色），2. 选择 1（仅显示 1、2、3），因为选择了红色。3. 链接到 Red 1 产品。

它很难解释，所以我真的希望这是有道理的。

以上只是表格的一小部分作为示例。

下面是我的一些示例 HTML：

<select name="color" class="colour">
  <option value="red">Red</option>
  <option value="blue">Blue</option>
  <option value="green">Green</option>
  <option value="orange">Orange</option>
</select>

<select name="numbers" class="numbers">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

我知道我可以使用与此类似的代码，但最终我将不得不创建大量不同的选择元素，因为根据每个字段中的选择，有许多不同的选项。

$('.colour').on('change',function(){
if ( $(this).val()=== "red") {
  $(".numbers").show();
}
else {
  $(".numbers").hide();
}

标签： javascriptjqueryhtmlforms

Answer 1

function loadBtn(){
   let colour = $(".colour").val();
   let numbers = $(".numbers").val();
   $('.btn').html(colour+" - "+numbers);
   $('.btn').attr("href", "http://yourURL.com/?colour="+colour+"&numbers"+numbers);
}

function loadNumbers(elem){
  let value = $(elem).val();
  let range = $(elem).find("option:selected").attr("numberRange");
  let newRanges = range.split(",").map(num => `<option value="${num}">${num}</option>`).join("");
  $('.numbers').html(newRanges);
}

loadNumbers($(".colour"));
loadBtn();

$('.colour').on('change',function(){
  loadNumbers(this);
  loadBtn();
});

$('.numbers').on('change',function(){
  loadBtn();
});

<script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
<select name="color" class="colour">
  <option value="red" numberRange="1,2,3">Red</option>
  <option value="blue" numberRange="1,2">Blue</option>
  <option value="green" numberRange="1,2,3,4">Green</option>
  <option value="orange" numberRange="1,2,3,4,5,6">Orange</option>
</select>

<select name="numbers" class="numbers">
</select> 
<a class="btn" href=""></a>