如何更改jQuery上的下拉菜單屬性？

Question

我的問題是，我有2個下拉菜單，我想通過第一個值更改第二個下拉菜單。例如：如果用戶在第一個下拉第二個下拉列表中選擇「Apple」，應立即獲得「iPhone」和「iPad」選項。如果客戶改變主意並選擇「微軟」「iPhone」和「iPad」值應該被刪除，而不是他們應該出現「Windows」和「Office」。我怎樣才能使它工作？謝謝。

HTML：

<select name="brand" id="brand" onChange="populateSecond(this.value);"> 
    <option value="">----------------</option> 
    <option value="1">Apple</option> 
    <option value="2">Microsoft</option> 
</select> 
<select id="model"> 
    <option value="">----------------</option> 
</select> 

的jQuery：

$(document).ready(function() { 
    $("#brand").change(function(populateSecond(id)) { 

      if(id == 1){ 
       $('select[id=model]').append('<option value="a">iPhone</option>'); 
       $('select[id=model]').append('<option value="a">iPad</option>'); 
      }if(id == 2){ 
       $('select[id=model]').append('<option value="b">Windows</option>');  
       $('select[id=model]').append('<option value="b">Office</option>'); 
      } 
    }); 
}); 

問題：http://jsfiddle.net/w6E88/6/

Answer 1

這裏是實現你想要的功能（與解釋註釋）

添加引導類選擇元素的外觀的另一個jQuery的方式。

HTML

<select id="mainCategorySelect" name="mainCategorySelect" class="form-control"> 
    <option>Select category</option> 
</select> 

<select id="subCategorySelect" name="subCategorySelect" class="form-control"></select> 

JS

// Wait for the dom to be ready 
$(function() { 

    // For the sake of this example our business and products are arrays 
    var businesses = ["Microsoft","Apple"], 
     msProducts = ["Microsoft Phone","Microsoft Office","Microsoft Windows 10"], 
     appleProducts = ["Apple iPhone","Apple iPad","Apple iPod","Apple iSomething"], 

     // Declare variables for the select elements 
     mainCategorySelect = $('#mainCategorySelect'), 
     subCategorySelect = $('#subCategorySelect'); 

    // Iterate thorugh businesses and populate the main select element 
    for (var i = 0; i < businesses.length; i++) { 
     mainCategorySelect.append("<option value='"+businesses[i]+"'>"+businesses[i]+"</option>"); 
    } 

    // using jQuery .on('change') 
    mainCategorySelect.on('change', function() { 
     // Always clear the sub category select when main select element value is changed 
     subCategorySelect.empty(); 
     // Retrieve the value of the main select element 
     var business = $(this).val(); 
     // if else statement to deside which products to list in the sub category select element 
     if (business == "Microsoft") { 
      // if Microsoft then iterate through the msProducts array and append the values as option elements to the sub category select element 
      for (var i = 0; i < msProducts.length; i++) { 
       subCategorySelect.append("<option value='"+msProducts[i]+"'>"+msProducts[i]+"</option>"); 
      } 
     } else if(business == "Apple") { 
      // if Apple then iterate through the appleProducts array and append the values as option elements to the sub category select element 
      for (var i = 0; i < appleProducts.length; i++) { 
       subCategorySelect.append("<option value='"+appleProducts[i]+"'>"+appleProducts[i]+"</option>"); 
      } 
     } 
     // When the user changes the value of the sub category select element the do something with it 
     subCategorySelect.on('change', function() { 
      alert($(this).val()); 
     }); 
    }); 
}); 

這裏是工作提琴：http://jsfiddle.net/kagLhpka/

Answer 2

取下HTML的onChange和做這樣的您已經使用jQuery！ onchange不需要給onChange如果您需要從第一個下拉列表中選擇的值，您可以簡單地使用this.value來獲取它並對第二個下拉列表進行必要的更改。

HTML

<select name="brand" id="brand"> 
 
    <option value="">----------------</option> 
 
    <option value="1">Apple</option> 
 
    <option value="2">Microsoft</option> 
 
</select> 
 
<select id="model"> 
 
    <option value="">----------------</option> 
 
</select>

JQUERY

$(document).ready(function() { 
$("#brand").change(function() { 

     var id=this.value; 
     if(id == 1){ 
      $('#model').html(""); 
      $('#model').append('<option value="a">iPhone</option>'); 
      $('#model').append('<option value="a">iPad</option>'); 
     }else if(id == 2){ 
      $('#model').html(""); 
      $('#model').append('<option value="b">Windows</option>');  
      $('#model').append('<option value="b">Office</option>'); 
     } 
     else{ 
     $('#model').html(""); 
     $('#model').append('<option value="">----------------</option>') 
     } 
}); 
}); 

Answer 3

你已經在你的HTML代碼onChange="populateSecond(this.value);"，沒有必要對JS的.change爲好。

您可以在首次調用函數之前完全定義函數populateSecond;或者只使用jQuery方法。我在這裏只給了jQuery結果：

$(document).ready(function() { 
 
    $("#brand").on('change', function (id) { 
 
     if (id == 1) { 
 
      $('select[id=model]').append('<option value="a">iPhone</option>'); 
 
      $('select[id=model]').append('<option value="a">iPad</option>'); 
 
     } else { 
 
      $('select[id=model]').append('<option value="b">Windows</option>'); 
 
      $('select[id=model]').append('<option value="b">Office</option>'); 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select name="brand" id="brand"> 
 
    <option value="">----------------</option> 
 
    <option value="1">Apple</option> 
 
    <option value="2">Microsoft</option> 
 
</select> 
 
<select id="model"> 
 
    <option value="">----------------</option> 
 
</select>

PS：我更喜歡使用.on('change', handler)法在.change。

Answer 4

這裏是結構化的方式。

var childData = { 
     apple: ["iPhone", "iPad"] , 
     ms: ["Windows", "Office"] 
    }; 
    $("#brand").change(function() { 
     var newData = childData[this.value]; 
     var element = $("#model").empty(); 

     element.append('<option>----------------</option>'); 
     $.each(newData, function(i, val) { 
      element.append('<option value='+i+'>'+val+'</option>'); 
     }); 

    }); 

檢查這個小提琴：http://jsfiddle.net/soundar24/w6E88/11/

Answer 5

使用明確的條件語句來驗證將使這很難在維持未來如果產品線擴展超過一定數量年。正如其他人所表明的那樣，使用某種形式的數組是更好的方法。

此外，雖然jQuery是一個偉大的圖書館，不要忘了香草JavaScript。如果編碼得當，即使看起來更復雜，普通JavaScript的運行速度應該比jQuery對手快。考慮到這一點，這裏有另一個解決方案，這次是「或多或少」普通的JavaScript - 我已經準備好了。

HTML

<select name="brand" id="brand"> 
    <option value="-1">--------------------</option> 
    <option value="apple">Apple</option> 
    <option value="microsoft">Microsoft</option> 
</select> 
<select id="model"> 
    <option value="-1">--------------------</option> 
</select> 

的JavaScript

var products = { 
    apple: [ 
    { name: "iPhone 6 Plus", model: "iphone_6plus" }, 
    { name: "iPhone 6", model: "iphone_6" }, 
    { name: "iPhone 5s", model: "iphone_5s" }, 
    { name: "iPhone 5c", model: "iphone_5c" } 
    ], 
    microsoft: [ 
    { name: "Windows 10", model: "windows_10" }, 
    { name: "Windows 8", model: "windows_8" }, 
    { name: "Office 2015", model: "office_2015" }, 
    { name: "Office 2014", model: "office_2014" } 
    ] 
}; 

function create_option(text, value) { 
    var option = document.createElement("option"); 
    var txt = document.createTextNode(text); 

    option.value = value; 
    option.appendChild(txt); 

    return option; 
} 

function populate_model(selection) { 
    var select = document.getElementById("model"); 
    var i, l; 

    if ((selection == -1) || (products[selection] === undefined)) 
    return false; 

    while (select.lastChild) 
    select.removeChild(select.lastChild); 

    select.appendChild(document.createElement("option").appendChild(document.createTextNode("--------------------"))); 

    for (i = 0, l = products[selection].length; i < l; i++) 
    select.appendChild(create_option(products[selection][i].name, products[selection][i].model)); 
} 

$(document).ready(function() { 
    var brand = document.getElementById("brand"); 

    brand.onchange = function() { 
    populate_model(this.options[this.selectedIndex].value); 
    }; 

    brand.value = -1; 
}); 

我已經更新您的jsfiddle還有：http://jsfiddle.net/w6E88/13/