取決於使用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數組

回答

相關問題