Javascript 如何使用PHP JSON数组根据另一个selectbox填充selectbox

我正在尝试弹出一个依赖于另一个选择框的选择框

<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>

A.
B
1.
2.
3.
4.

例如，当用户选择select1（a）时，Select2显示1、2和3 当他选择B时，它显示4，5，6等等

selectbox值是一个PHP数组对象，我曾尝试使用jQuery使用

$填充它。每个
值都不起作用，因为数组类似于：

{“选项1”：[{“名称”：“测试”，“年龄”：“1”}，…]}

提前感谢。
下面是一个如何使用jquery实现更改的示例

请多发布/解释一下您的对象格式，我将创建一个循环来正确解析它



引导示例
A.
B
1.
2.
3.
4.
$（“#字母”）。更改（函数（）{
如果（$（“#字母”）.val（）=“a”）{
$（“年龄”）
.empty（）
.append（'1'）
;
}否则{
$（“年龄”）
.empty（）
.append（'5'）
;
}
});
//您可以尝试类似的方法。
var s1=document.getElementById（“s1”）；
var s2=document.getElementById（“s2”）；
var s1值=s1.0值；
var i；
var frag=document.createDocumentFragment（）；
var-ele；
如果（s1Value='a'）{
例如，对于（i=0；i，您有以下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库）。请看下面的示例：


$（函数（）{
var selectValues={
“苹果”：{
“iphone SE”：https://www.apple.com/iphone-se/",
“iphone 7”：https://www.apple.com/iphone-7/"
},
“三星”：{
“星系s8”：http://www.samsung.com/us/explore/galaxy-s8/",
“星系s7”：http://www.samsung.com/us/explore/galaxy-s7/"
}
};
var$vendor=$（'select.mobile vendor'）；
var$model=$（'select.model'）；
$vendor.change（函数（）{
$model.empty（）.append（函数（））{
var输出=“”；
$.each（选择值[$vendor.val（）]，函数（键，值）{
输出+=''+键+''；
});
返回输出；
});
}).change（）；
})；


苹果
三星
谢谢大家的帮助。不过，我采用了另一种方法。即在“选择为选项”中输出整个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>


$（“.select2”）.prop（“已禁用”，true）；
$（“.select1”）.change（函数（）{
$（'.select2'）.prop（'disabled'，false）；
$（“.select2选项”）.hide（）；
var currentVal=$（'.select1:selected'）.attr（'optionis'），
ValueSelected=$（“.select2选项[optionvalue*=”“+currentVal+”]”）；
ValueSelected.show（）；
$（ValueSelected）.first（）.prop（“selected”，true）；
});
选择1
选择2
值1
价值2
价值3
价值4
价值5

您必须基于选择框1创建动态选项元素，并将这些元素附加到选择框2中。您能否分享您的完整解决方案。这可能会对您有所帮助。以下是一个“使用未解决问题”的答案对您有帮助吗？
<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>