Question

我有两个drop down boxes。

<select id="brand">
<option id="20">Honda</option>
<option id="22">Maruti</option>
</select>

<select id="model">
<option id="50">City</option>
<option id="51">Alto</option>
<option id="52">Amaze</option>
<option id="53">Civic</option>
<option id="54">Swift</option>
<option id="55">Ritz</option>
</select>

根据所选的brand，我必须使用适当的值加载model下拉列表。如果用户从Honda选择brand，则model下拉列表应仅包含（显示）City, Amaze,和Civic值。

由于option id are dynamically created我无法通过其ID访问该选项。因此无需添加新选项，因为所有选项都在那里。所以我只需要show/hide options in model drop down.

我很困惑，因为我无法通过其ID访问该选项（它们是动态创建的），我只能通过其文本进行访问。

我该怎么做？请帮帮我......

Answer 1

试试这个Demo

$('#brand').change(function() {    
    var brandValue = $(this).val();
    if(brandValue == "Honda") {
        $("#model option[id='50']").show();        
    }        
})

Answer 2

如果您的选择ID是静态的，您可以：

TextInputLayout

但是你不应该有多个Id。使用另一个属性而不是它。

Answer 3

您必须使用text()才能获取选项的内容：

// When the selected value of brand changes
$('#brand').change(function(){
    // Loop through each option from model
    $('#model option').each(function(){
        // If you chose Honda
        if ($('#brand option:selected').text() == 'Honda')
        {
            // If the option is City, Amaze or Civic, show it
            if ($.inArray($(this).text(), ['City', 'Amaze', 'Civic']))
                $(this).show();
            // If not, hide it
            else
                $(this).hide();
        }
        // You chose Maruti
        else
        {
            // You didn't specify what to do in this case si I guess you want to show all
            $(this).show();
        }
    });
});

请注意，您在代码（50和51）中多次使用相同的ID。这是无效的。

Answer 4

您可以使用jQuery hide()和show()函数来实现相同的功能。

以下是供您参考的代码块。

 <script>
    $(document).ready(function () {
        $("select[Title='Status']").find('option:contains("Open")').hide();         
    });
 </script>

Answer 5

＆＃13;

var hondaModels = [
  "City",
  "Amaze",
  "Civic"
];

var marutiModels = [
  "Alto",
  "Swift",
  "Ritz"
];

var updateModelList = function(){
  $("#model").find("option").hide();
  var model = $("#brand").val().toLowerCase();
  switch(model){
    case "honda" :
      hondaModels.forEach(function(model){
        $("#model").find("option:contains(" +model +")").show();
      });
      $("#model").val("City");
      break;
    case "maruti" :
       marutiModels.forEach(function(model){
        $("#model").find("option:contains(" +model +")").show();
      });
      $("#model").val("Alto");
      break;
    default : 
     return false;
  }
  
};

updateModelList();

$("#brand").on("change", function(){
  updateModelList();
});

＆＃13;

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <select id="brand">
    <option id="20">Honda</option>
    <option id="22">Maruti</option>
  </select>
  
  <select id="model">
    <option id="50">City</option>
    <option id="51">Alto</option>
    <option id="50">Amaze</option>
    <option id="51">Civic</option>
    <option id="50">Swift</option>
    <option id="51">Ritz</option>
  </select>
</body>
</html>

＆＃13;

在这里，我搜索选项的文本节点，并使用数组显示它们，以存储特定品牌的模型。

使用jquery

5 个答案: