根据价值选择选项[关闭]答案

【问题标题】：Select options based on value [closed]根据价值选择选项[关闭]
【发布时间】：2018-02-12 12:31:45
【问题描述】：

我有两个这样的选择选项

<select name="category" class="category">
    <option value="low">Low</option>
    <option value="mid">Mid</option>
    <option value="high">High</option>
</select>
<select name="details" class="details">
    <option value="2">john</option>
    <option value="5">smith</option>
    <option value="2">james</option>
    <option value="3">bram</option>
    <option value="10">gary</option>
</select>

当我选择低时，我希望在细节上只显示 john、james 和 bram。中期，我希望细节只显示 smith，而对于高，我希望细节只显示 gary。我怎么能用 jquery 做到这一点？

范围是 1-4 低，5-9 是中，>10 是高。

【问题讨论】：

如何将低、中、高映射到 1、5 和 10？
1-4 低，5-9 中，>10 高
@ghabriel 然后第二个选择框需要多选
我们总是乐于帮助和支持新的编码员，但您需要先帮助自己。在doing more research 之后，如果您有任何问题，请发布您尝试过的内容，并清楚说明什么不起作用并提供a Minimal, Complete, and Verifiable example。阅读'How to Ask a good question' guide。另外，请务必take the tour 并阅读this
@AlivetoDie 未选择，仅显示与第一个选择选项相关的下拉选项

标签： javascript jquery html

【解决方案1】：

您必须遍历您的 option 列表并相应地隐藏/显示它们。

在这里，我使用switch 来限制隐藏/显示的选项。

$('.category').on('change',function(){
  switch ($(this).val()){
    case 'low':
      $('.details option').each(function(){
        if(+$(this).val() <= 4) $(this).show();
        else $(this).hide();
      });
      break;
     case 'mid':
      $('.details option').each(function(){
        if(+$(this).val() <= 9 && +$(this).val() >= 5) $(this).show();
        else $(this).hide();
      });
      break;
     case 'high':
      $('.details option').each(function(){
        if(+$(this).val() == 10) $(this).show();
        else $(this).hide();
      });
      break;
  }
});

$('.category').trigger('change');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="category" class="category">
    <option value="low">Low</option>
    <option value="mid">Mid</option>
    <option value="high">High</option>
</select>
<select name="details" class="details">
    <option value="2">john</option>
    <option value="5">smith</option>
    <option value="2">james</option>
    <option value="3">bram</option>
    <option value="10">gary</option>
</select>

【讨论】：

首先知道我可以使用这样的 if 语句。谢谢你的新知识，它就像一个魅力
@ghabriel 很高兴我能帮上忙。我建议你看看switch statement documentation。它将帮助您更好地理解它。

【解决方案2】：

您可以尝试使用此代码：

$(".category").change(function() {
  var t = $(this).val();
  $(".details option").filter(function(i, x) {
    if (t == "low") {
      $(x).val() >= 1 && $(x).val() <= 4 ? $(x).show() : $(x).hide()
    } else if (t == "mid") {
      $(x).val() >= 5 && $(x).val() <= 9 ? $(x).show() : $(x).hide()
    }
    else {
      $(x).val() > 10 ? $(x).show() : $(x).hide()
    }
  });
})

演示

$(".category").change(function() {
  var t = $(this).val();
  $(".details option").filter(function(i, x) {
    if (t == "low") {
      $(x).val() >= 1 && $(x).val() <= 5 ? $(x).show() : $(x).hide()
    } else if (t == "mid") {
      $(x).val() > 5 && $(x).val() <= 9 ? $(x).show() : $(x).hide()
    }
    else {
      $(x).val() > 10 ? $(x).show() : $(x).hide()
    }
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="category" class="category">
    <option value="low">Low</option>
    <option value="mid">Mid</option>
    <option value="high">High</option>
</select>
<select name="details" class="details">
    <option value="2">john</option>
    <option value="5">smith</option>
    <option value="2">james</option>
    <option value="10">gary</option>
</select>

【讨论】：

【解决方案3】：

将详细信息选择的值更改为相应的类别。因此，将 2 更改为低，将 5 更改为中，将 10 更改为高。然后你可以得到选择的类别值并将其放在下面的代码中以按值选择选项。

<select name="category" class="category">
    <option value="low">Low</option>
    <option value="mid">Mid</option>
    <option value="high">High</option>
</select>
<select name="details" class="details">
    <option value="low">john</option>
    <option value="mid">smith</option>
    <option value="low">james</option>
    <option value="mid">bram</option>
    <option value="high">gary</option>
</select>

$('.category').on('change',function(){    
    var category = $(this).val();   
    $(".details option[value!='"+category+"']").hide();
    $(".details option[value='"+category+"']").show();
    $(".details").val($(".details option:visible:first").val());
});

https://jsfiddle.net/5cpjn5nb/

【讨论】：

【解决方案4】：

您始终可以创建一个 Javascript 对象来存储您想要的中、低、高选项。之后，您只需创建一个函数，每次用户更改主选择时都会调用，此功能将搜索您的对象以找到适当的选项。

注意：下面的例子是没有使用任何外部库如jQuery等。

var myOptionsObject = {
 "low" : ["john","smith","james"],
 "mid" : ["bram"],
 "high" : ["gary"]
}

function loadSubSelect(myIndex){
 var parentEl = document.getElementById('myParentSelect');
 var childEl = document.getElementById('mySubSelect');
 var mySelectedValue = parentEl.options[myIndex].value;

// Create the New Select with the appropriate options given from "myOptionsObject"
 var mySubSelect = '<select name="details" class="details">';
 myOptionsObject[mySelectedValue].forEach(function(key){
  mySubSelect += '<option value="'+key+'">'+key+'</option>'; 
 });
 mySubSelect += "</select>";

 childEl.innerHTML = mySubSelect;
}

// Execute the below Function to get the first results
loadSubSelect(1);

<div id='parentSelect'>
 <select name="category" id='myParentSelect' class="category" onChange="loadSubSelect(this.selectedIndex);">
     <option value="low">Low</option>
     <option value="mid">Mid</option>
     <option value="high">High</option>
 </select>
</div>
<div id='mySubSelect'></div>

【讨论】：