Как изменить атрибуты меню выпадающего меню на jQuery?

Question

Моя проблема в том, что у меня есть два выпадающих списка, и я хочу изменить второе выпадающее меню на значение первого. Например: если пользователь выбирает «Apple» в первом выпадающем меню, вы сразу же получите «iPhone» и «iPad». Если клиент меняет свое мнение и выбирает «Microsoft», «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

Удалить onChange из HTML и сделать это так Вы уже используете Jquery! onchange не нужно указывать onChange на ваш HTML-код также, если вам нужно выбранное значение из первого раскрывающегося списка, вы можете просто использовать this.value, чтобы получить его и внести необходимые изменения в свой второй список DropDown.

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

Вы уже onChange="populateSecond(this.value);" в вашем HTML-коде, нет необходимости в .change в JS, а также.

Вы можете либо определить функцию 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>'); 
     }); 

    }); 

Проверить это Fiddle: 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/