Question

我想根据所选的第一个选项更改文件，例如。如果他们选择“X”我想要访问“x.json文件”，如果他们选择“V”然后选择“V.json文件”。我做文件名= $（这个）如下？

HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>A document with SCRIPT</TITLE>
<META http-equiv="Content-Script-Type" content="text/tcl">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

</SCRIPT>
</HEAD>
<BODY>

<select id="first-choice">
  <option selected value="base">Please Select</option>
  <option value="beverages">Beverages</option>
  <option value="snacks">Snacks</option>
</select>

<br>

<select id="second-choice">
  <option>Please choose from above</option>
</select>


<SCRIPT type="text/javascript">

$("#first-choice").change(function() {

    var $dropdown = $(this);

    $.getJSON("data.json", function(data) {

        var key = $dropdown.val();
        var vals = [];

        switch(key) {
            case 'beverages':
                vals = data.beverages.split(",");
                break;
            case 'snacks':
                vals = data.snacks.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>

JSON :(想要分成两个文件）

{
  "beverages": "Coffee,Coke",
  "snacks": "Chips,Cookies"
}

Answer 1

试试这个：

＆＃13;

var dummyData = {"beverages": "Coffee,Coke","snacks": "Chips,Cookies"};

$("#first-choice").change(function() {

    var key = $(this).val();
    $.getJSON("data.json", function(data) {
      handleResponse(data, key);
    }).fail(function(){
      //just using this call back to handle dummyData cause obviosly the url should fail
      handleResponse(dummyData, key);
    });
});

function handleResponse(data, key){
       var keyValues =  data[key];
       var options = '<option>Please choose from above</option>';
       
       if(keyValues) {
            options += keyValues.split(',').map(function(value){
            return '<option value ="'+value+'" >'+value+'</option>';
       })
       }
       //just overwriting options each time, think is better than appending
       $('#second-choice').html(options); 

}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="first-choice">
  <option selected value="base">Please Select</option>
  <option value="beverages">Beverages</option>
  <option value="snacks">Snacks</option>
</select>

<br>

<select id="second-choice">
  <option>Please choose from above</option>
</select>

＆＃13;

Answer 2

我检查你的代码并做了一些编辑，请检查下面的工作代码。

HTML - ：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>A document with SCRIPT</TITLE>
<META http-equiv="Content-Script-Type" content="text/tcl">
<script src="https://code.jquery.com/jquery-2.2.4.js" ></script>
</SCRIPT>
</HEAD>
<BODY>
<select id="first-choice">
<option selected value="base">Please Select</option>
<option value="beverages">Beverages</option>
<option value="snacks">Snacks</option>
</select>
<br>
<select id="second-choice">
<option>Please choose from above</option>
</select>
<script type="text/javascript">
$(document).ready(function(){
$("#first-choice").change(function() {
var $dropdown = $(this);

$.getJSON("data.json", function(data) {

    var key = $dropdown.val();
    var vals = [];

    switch(key) {
        case 'beverages':
            vals = data.beverages.join().split(",");
            break;
        case 'snacks':
            vals = data.snacks.join().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>

json.data - ：

{
   "beverages": ["b1", "b2", "b3"],
   "snacks": ["s1", "s2", "s3"]
}

您可以根据自己的要求进行更改。

输出 - ：

我希望你的问题现在解决了。享受

html下拉菜单依赖于json数据

2 个答案: