取决于使用PHP JSON数组

我想poplulate一个选择框是依赖于另一个选择框取决于使用PHP JSON数组

<select> 
    <option value="a">a</option> 
    <option value="b">b</option> 
</select> 



<select> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
</select>

我想例如另一个选择框如何填充一个选择框，当用户选择选择1（ a），Select2显示1,2和3 ，当他选择B时，显示4,5,6等等。

的选择框的值是一个PHP数组对象，我尝试使用jQuery的$.each来填充它，但没有制定出作为数组是这样的：提前

{ "Option 1":[ {"name" : "test", "age" : "1"}, .... ] }

感谢。

来源

2017-07-22 Mostafa Mohsen

你必须创建基于选择框1的动态选择元素，并附加选择框2.这些元素能否请您分享您的完整的解决方案。 –

[jQuery]（https://jquery.com/）可以帮助你。这里是一个工作[示例]（https://stackoverflow.com/questions/18351921/how-to-populate-a-cascading-dropdown-with-jquery）与[的jsfiddle]（http://jsfiddle.net/arunpjohny/2pza5 /） – Kurohige

没有答案帮助你？ – mshomali

谢谢你们所有帮助不过，我也跟着另一种方法。这是输出在选择的选项整个PHP数组，并隐藏他们，并且选择在选择1个选项的时候，我使用jQuery只显示具有特定属性的项目：

<script> 
$(".select2").prop("disabled", true); 
$(".select1").change(function() { 
$('.select2').prop('disabled', false); 
$(".select2 option").hide(); 
var currentVal = $('.select1 :selected').attr('optionis'), 
ValueSelected = $(".select2 option[optionvalue*='" + currentVal + "']"); 
ValueSelected.show(); 
$(ValueSelected).first().prop("selected", true); 
}); 
</script> 
<select class="select1"> 
    <option value="1" optionis="1">Option 1</option> 
    <option value="2" optionis="2">Option 2</option> 
</select> 
<select class="select2"> 
    <option value="1" optionvalue="1">Value 1</option> 
    <option value="2" optionvalue="1">Value 2</option> 
    <option value="1" optionvalue="2">Value 3</option> 
    <option value="1" optionvalue="2">Value 4</option> 
    <option value="1" optionvalue="2">Value 5</option> 
</select>

CODEPEN

来源

2017-07-24 13:47:14

这里是如何实现与jQuery的变化的例子。

请张贴/解释你的对象格式的更多一点，我将创建循环正确解析它。

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 
<select id="letter"> 
 
    <option value="a">a</option> 
 
    <option value="b">b</option> 
 
</select> 
 

 
<select id="age"> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
    <option value="4">4</option> 
 
</select> 
 
    <script> 
 
    $("#letter").change(function(){ 
 
    if($("#letter").val() === "a"){ 
 
     $("#age") 
 
     .empty() 
 
     .append('<option selected="selected" value="1">1</option>') 
 
     ; 
 
    }else{ 
 
     $("#age") 
 
     .empty() 
 
     .append('<option selected="selected" value="5">5</option>') 
 
     ; 
 
    } 
 
    }); 
 
    </script> 
 
</body> 
 
</html>

来源

2017-07-22 15:23:24 xxLITxx

// you can try something like this. 

var s1 = document.getElementById("s1"); 
var s2 = document.getElementById("s2"); 

var s1Value = s1.value; 

var i; 
var frag = document.createDocumentFragment(); 
var ele; 
if(s1Value == 'a'){ 
    for(i=0;i<3;i++){ 
     ele = document.createElement('option'); 
     ele.value = i + 1; 
     ele.innerHTML = i + 1; 
     frag.appendChild(ele); 
    } 
} 
s2.innerHTML = '' 
s2.appendChild(frag);

来源

2017-07-22 15:23:40

例如，你有以下的JSON：

{ 
    "Apple": { 
     "iphone SE": "https://www.apple.com/iphone-se/", 
     "iphone 7": "https://www.apple.com/iphone-7/" 
    }, 
    "samsung": { 
     "galaxy s8": "http://www.samsung.com/us/explore/galaxy-s8/", 
     "galaxy s7": "http://www.samsung.com/us/explore/galaxy-s7/" 
    } 
}

为此，我们必须使用JavaScript和这是很好的使用jQuery（对JavaScript库）。看看下面的例子：

$(function() { 
 
    var selectValues = { 
 
     "apple": { 
 
      "iphone SE": "https://www.apple.com/iphone-se/", 
 
      "iphone 7": "https://www.apple.com/iphone-7/" 
 
     }, 
 
     "samsung": { 
 
      "galaxy s8": "http://www.samsung.com/us/explore/galaxy-s8/", 
 
      "galaxy s7": "http://www.samsung.com/us/explore/galaxy-s7/" 
 
     } 
 
    }; 
 

 
    var $vendor = $('select.mobile-vendor'); 
 
    var $model = $('select.model'); 
 
    $vendor.change(function() { 
 
     $model.empty().append(function() { 
 
      var output = ''; 
 
      $.each(selectValues[$vendor.val()], function(key, value) { 
 
       output += '<option>' + key + '</option>'; 
 
      }); 
 
      return output; 
 
     }); 
 
    }).change(); 
 

 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p> 
 
    <select class="mobile-vendor"> 
 
    <option value="apple">Apple</option> 
 
    <option value="samsung">Samsung</option> 
 
    </select> 
 

 
<select class="model"> 
 
    <option></option> 
 
</select> 
 
</p>

来源

2017-07-22 15:44:09 mshomali

取决于使用PHP JSON数组

回答

相关问题