Question

我有两个像这样的选择

<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>

当我选择低时，我想要详细显示约翰，詹姆斯和布拉姆。对于中期，我想要细节只显示史密斯和高我想要细节只是显示加里。我怎么能用jquery做到这一点？

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

Answer 1

您必须循环浏览option列表并相应地隐藏/显示它们。

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

＆＃13;

$('.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');

＆＃13;

<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>

＆＃13;

Answer 2

为de details更改de value选择相应的类别。所以将2改为低，5改为中，10改为高。然后，您可以获取所选的类别值并将其放在下面的代码中，以按值选择选项。

ionic forum

https://jsfiddle.net/5cpjn5nb/

Answer 3

您可以尝试使用此代码：

$(".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()
    }
  });
})

<强>演示

＆＃13;

$(".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()
    }
  });
})

＆＃13;

<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>

＆＃13;

Answer 4

您始终可以创建一个Javascript对象，该对象将存储您想要的中，低，高选项。之后，您只需创建一个函数，每次用户更改主选择时都会调用该函数，此函数将搜索您的对象以查找要显示的相应选项。

注意：以下示例为，不使用任何外部库（如jQuery等）。

＆＃13;

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);

＆＃13;

<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>

＆＃13;

根据值

4 个答案: