更改选择框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

如果在方框1中选择了“颜色”值，方框2将显示选项“红色”，“橙色”和“仅黄色”。但是，如果选择“食物”值，Box2将仅显示“苹果”，“香蕉”和“西瓜”的选项。 – Ayaz

可从以下这可以achived几个方法：1。使用数据库 2.使用JSON

我可以向你展示如何执行此使用JSON

创建一个JSON其中HTML文件放在文件（data.json）和发生在相同foleder

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的基于的BOX1所选值填充BOX2。解决办法是这样的：

添加id属性，每个<select>盒，不预填充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的内容另一个

回答

相关问题