Изменить содержимое поля выбора w.r.t. другой

Я новичок в разработке веб-сайтов. У меня есть выбор 2 (Box1 & Box2 - выпадающий). Я хочу, чтобы содержимое Box2 менялось в соответствии с выбором первого окна. Как я могу это сделать ?Изменить содержимое поля выбора w.r.t. другой

Box1:<br> 
<select name="country" class="field-select"> 
<option value="selected">Options</option> 
<option value="Color">Color</option> 
<option value="Food">Food</option> 
</select> 

Box2:<br> 
<select name="item" class="field-select"> 
<option value="Red">Red</option> 
<option value="Orange">Orange</option> 
<option value="Yellow">Yellow</option> 
<option value="Apple">Apple</option> 
<option value="Banana">Banana</option> 
<option value="Watermelon">Watermelon</option> 
</select>

источник

2016-09-14 Ayaz

Что является источником для 'Box2'? – Rayon

Если в поле Box1 выбрано значение «Цвет», в поле 2 будут показаны опции «Красный», «Оранжевый» и «Только желтый». Но если выбрано значение «Продовольствие», Box2 покажет варианты только для «Apple», «Banana» и «Арбуз». – Ayaz

Есть несколько способов, с помощью которых это может быть achived: 1. Использование базы данных 2. Использование JSON

Я может быть показывая вам, как выполнить это с помощью JSON

Создать JSON файл (data.json) и место в том же foleder, в котором файл HTML помещается

JSON [data.json]

{ 
    "color":"Red,Orange,Yellow", 
    "food":"Apple,Banana,Watermelon" 
}

HTML & JQuery [fiddle.html]

<!DOCTYPE html> 
<html> 
<head> 
    <title>Fiddle</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 

</head> 
<body> 
<select id="first-choice"> 
    <option selected value="base">Options</option> 
    <option value="color">Color</option> 
    <option value="food">Food</option> 
</select> 
<br> 
<select id="second-choice"> 
    <option>Please choose from the above</option> 
</select> 
<script type="text/javascript"> 
    console.log($("#first-choice")); 
     $("#first-choice").on("change", function(){ 
      var $dropdown = $(this); 
      $.getJSON("data.json",function(data){ 
       var key = $dropdown.val(); 
       var vals = []; 

       switch(key){ 
        case 'color': 
        vals = data.color.split(","); 
        break; 
        case 'food': 
        vals = data.food.split(","); 
        break; 
        case 'base': 
        vals = ['Please choose from above']; 
       } 
       var $secondChoice = $("#second-choice"); 
       $secondChoice.empty(); 
       $.each(vals,function(index,value){ 
        $secondChoice.append("<option>" + value + "</option>"); 
       }); 
      }); 
     }); 
    </script> 
</body> 
</html>

источник

2016-09-14 09:49:23 shishir

Использование JQuery для заполнения BOX2 на основе выбранного значения Box1. Решение будет так:

Добавить атрибут id для каждого из ваших <select> Box, а не предварительно заполнить BOX2, как это:
```
Box1:<br> 
<select name="country" class="field-select" id="box1"> 
    <option value="selected">Options</option> 
    <option value="Color">Color</option> 
    <option value="Food">Food</option> 
</select> 

Box2:<br> 
<select name="item" class="field-select" id="box2"> 
    <option>--</option> 
</select> 
```
Примечание: Если вы хотите, вы можете изменить эту строку <option>--</option> в Box2 и добавить свой собственный код <option>, это не повредит общей логике.

И ваш Jquery будет выглядеть так:

<script> 
    $(document).ready(function(){ 
     $(document).on('change', '#box1', function(){ 
      if($(this).val() == 'Color'){ 
       $('#box2').html("<option value='Red'>Red</option>"  
        +"<option value='Orange'>Orange</option>" 
        +"<option value='Yellow'>Yellow</option>"); 
      }else if($(this).val() == 'Food'){ 
       $('#box2').html("<option value='Apple'>Apple</option>" 
        +"<option value='Banana'>Banana</option>" 
        +"<option value='Watermelon'>Watermelon</option>"); 
      } 
     }); 
    }); 
</script>

Вот демо, https://jsfiddle.net/dmrmwfm4/

источник

2016-09-14 16:06:19

Изменить содержимое поля выбора w.r.t. другой

ответ

Смежные вопросы