Javascript 基于另一个下拉列表禁用下拉列表中的选项
我正在尝试根据其他下拉选项的选择禁用/删除下拉列表中的选项。 但是我们必须选择的下拉列表/选择器有一个子下拉列表，主下拉列表和子下拉列表都是 共享相同的类和ID，但由于它们都用不同的ID包装在不同的div中，所以我 正在尝试访问第二个选择器，但无法访问。 下面是我用于此目的的js代码Javascript 基于另一个下拉列表禁用下拉列表中的选项,javascript,jquery,Javascript,Jquery,我正在尝试根据其他下拉选项的选择禁用/删除下拉列表中的选项。 但是我们必须选择的下拉列表/选择器有一个子下拉列表，主下拉列表和子下拉列表都是 共享相同的类和ID，但由于它们都用不同的ID包装在不同的div中，所以我 正在尝试访问第二个选择器，但无法访问。 下面是我用于此目的的js代码 <script type="text/javascript"> document.getElementById("lvl1").querySelector("select").onchange = fu
<script type="text/javascript">
document.getElementById("lvl1").querySelector("select").onchange = function()
{
if(this.value=="8"){
var bikeSizes = document.getElementById("pa_size[]");
for ( var i = 1; i <8; i++) {
bikeSizes.options[i].removeAttribute("disabled", "disabled");
}
for ( var i = 8; i < 12; i++) {
bikeSizes.options[i].setAttribute("disabled", "disabled");
}
} else {
var bikeSizes = document.getElementById("pa_size[]");
for ( var i = 1; i < 8; i++) {
bikeSizes.options[i].setAttribute("disabled", "disabled");
}
for ( var i = 8; i < 12; i++) {
bikeSizes.options[i].removeAttribute("disabled", "disabled");
}
}
return false;
};
</script>
document.getElementById（“lvl1”）.querySelector（“select”）.onchange=function（）
{
如果（该值=“8”）{
var bikeSizes=document.getElementById（“pa_size[]）；
对于（var i=1；i我修复了引号，然后将其放入一个onload函数中。此外，removeAttribute上没有第二个参数。这对我很有用
<script>
window.onload = function () {
document.getElementById("product_cat").onchange = function () {
if (this.value == "8") {
var bikeSizes = document.getElementById("pa_size[]");
for (var i = 1; i < 8; i++) {
bikeSizes.options[i].removeAttribute("disabled");
}
for (var i = 8; i < 12; i++) {
bikeSizes.options[i].setAttribute("disabled", "disabled");
}
} else {
var bikeSizes = document.getElementById("pa_size[]");
for (var i = 1; i < 8; i++) {
bikeSizes.options[i].setAttribute("disabled", "disabled");
}
for (var i = 8; i < 12; i++) {
bikeSizes.options[i].removeAttribute("disabled");
}
}
return false;
};
}
</script>
<!-- my test html -->
<div id="lvl1" level="1" style="">
<select data-required="yes" data-type="select" name="product_cat" id="product_cat" class="cat-ajax product_cat wpuf_product_cat_">
<option value="-1">— Select —</option>
<option class="level-0" value="8">Bikes</option>
</select>
<span data-taxonomy="{"required":"yes","name":"product_cat","exclude_type":"child_of","exclude":"camping,road-sports,water-sports","orderby":"name","order":"ASC"}"></span>
<select id="pa_size[]">
<option value="-1">--Select--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
</select>
</div>
window.onload=函数（）{
document.getElementById（“product_cat”）.onchange=function（）{
如果（this.value==“8”）{
var bikeSizes=document.getElementById（“pa_size[]）；
对于（变量i=1；i<8；i++）{
选项[i]。删除属性（“禁用”）；
}
对于（变量i=8；i<12；i++）{
bikeSizes.options[i].setAttribute（“禁用”、“禁用”）；
}
}否则{
var bikeSizes=document.getElementById（“pa_size[]）；
对于（变量i=1；i<8；i++）{
bikeSizes.options[i].setAttribute（“禁用”、“禁用”）；
}
对于（变量i=8；i<12；i++）{
选项[i]。删除属性（“禁用”）；
}
}
返回false；
};
}
-挑选-
自行车
--挑选--
1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
根据我在您网站上看到的内容，这里有一个替代解决方案：
<script>
var group1 = [ { value:"33", text:"Small Unisex"},
{ value:"34", text:"Large Unisex"},
{ value:"35", text:"XL Unisex"},
{ value:"36", text:"Small Womens"},
{ value:"37", text:"Medium Womens"},
{ value:"38", text:"Large Womens"},
{ value:"39", text:"XL Womens"}];
var group2 = [{value:"40", text:"Medium"},
{value:"41", text:"Small"},
{ value:"43", text:"XL"},
{ value:"42", text:"Large"}];
window.onload = function() {
document.getElementById("product_cat").onchange = function () {
var bikeSizes = document.getElementById("pa_size[]");
bikeSizes.innerHTML = "";
bikeSizes.appendChild(new Option("--Select--", "-1"));
bikeSizes.disabled = false;
if (this.value == "-1") {
bikeSizes.disabled = true;
}
else if (this.value == "8") {
for (var i = 0; i < group1.length; ++i){
var opt = new Option(group1[i].text, group1[i].value);
bikeSizes.appendChild(opt);
}
} else {
for (var i = 0; i < group2.length; ++i) {
var opt = new Option(group2[i].text, group2[i].value);
bikeSizes.appendChild(opt);
}
}
return false;
};
}
</script>
var group1=[{value:“33”，text:“Small Unisex”}，
{值：“34”，文本：“大型男女通用”}，
{值：“35”，文本：“XL中性款”}，
{值：“36”，文本：“小女人”}，
{值：“37”，文本：“中等女性”}，
{值：“38”，文本：“大女人”}，
{数值：“39”，文字：“XL女性”}；
var group2=[{value:“40”，text:“Medium”}，
{值：“41”，文本：“小”}，
{值：“43”，文本：“XL”}，
{值：“42”，文本：“大”}]；
window.onload=函数（）{
document.getElementById（“product_cat”）.onchange=function（）{
var bikeSizes=document.getElementById（“pa_size[]）；
bikeSizes.innerHTML=“”；
appendChild（新选项（“--Select--”和“-1”）；
bikeSizes.disabled=false；
如果（this.value==“-1”）{
bikeSizes.disabled=true；
}
否则如果（this.value==“8”）{
对于（变量i=0；i
那么这是否更接近您需要的？这是3个选择框，您只能在第一个选择有效后才能看到第二个选择框。然后，您只能在第二个选择有效时才能看到第三个选择框
可用选项取决于其主选择框
你可以看到它在这里工作
var fakeData={
group1:[{value:“group3”，text:“3”}，{value:“group4”，text:“4”}]，
组2:[{值：“组5”，文本：“5”}，{值：“组6”，文本：“6”}]，
组3:[{值：“组7”，文本：“7”}，{值：“组8”，文本：“8”}]，
组4:[{值：“组9”，文本：“9”}，{值：“组10”，文本：“10”}]
};
$（文档）.ready（函数（）{
//首先选择框更改处理程序
$（“产品”类别）。关于（“更改”，功能（）{
var val=该值；
美元（“#d”）.val（“-1”）；
setUpSel（$（“#d”），val）；
美元（“#d”）。触发（“变更”）；
$（“d”）.css（“display”，val==“-1”？“none”：“）；
});
$（“#d”）。关于（“更改”，函数（）{
var val=该值；
美元（“#c”）.val（“-1”）；
setUpSel（$（“#c”），val）；
美元（“#c”）。触发（“变更”）；
$（“#c”）.css（“display”，val==“-1”？“none”：“）；
});
});
功能设置选择（$sel，组）{
$sel.html（“--Select-->”）；
var selData=伪造数据[组]；
$.each（selData，function（i，opt）{
$sel.append（新选项（opt.text，opt.value））；
});
}
很抱歉忘记添加html代码：将html添加到您可以添加的位置…在您的问题下方有一个编辑链接。thnx我将其添加到了Document.getElementById（“lvl1”）.querySelector（“选择”）.onchange=function（）{缺少一个quoteas描述说，我已经尝试过该解决方案，但不知怎么的，它没有发挥应有的作用。因为它应该与从“骑乘类别”中选择任何选项后出现的子下拉列表一起工作"下拉列表。这是url，您可以看到我想要完成的任务：我查看了您的网站以及您如何使用上述代码。它不会起作用。隐藏选项元素仅在某些浏览器中有效，大多数浏览器会忽略它。今晚我将再看一看。我正在工作，非常感谢您的支持，期待您的支持输入一个问题，选择什么应该是可见的
<script>
var group1 = [ { value:"33", text:"Small Unisex"},
{ value:"34", text:"Large Unisex"},
{ value:"35", text:"XL Unisex"},
{ value:"36", text:"Small Womens"},
{ value:"37", text:"Medium Womens"},
{ value:"38", text:"Large Womens"},
{ value:"39", text:"XL Womens"}];
var group2 = [{value:"40", text:"Medium"},
{value:"41", text:"Small"},
{ value:"43", text:"XL"},
{ value:"42", text:"Large"}];
window.onload = function() {
document.getElementById("product_cat").onchange = function () {
var bikeSizes = document.getElementById("pa_size[]");
bikeSizes.innerHTML = "";
bikeSizes.appendChild(new Option("--Select--", "-1"));
bikeSizes.disabled = false;
if (this.value == "-1") {
bikeSizes.disabled = true;
}
else if (this.value == "8") {
for (var i = 0; i < group1.length; ++i){
var opt = new Option(group1[i].text, group1[i].value);
bikeSizes.appendChild(opt);
}
} else {
for (var i = 0; i < group2.length; ++i) {
var opt = new Option(group2[i].text, group2[i].value);
bikeSizes.appendChild(opt);
}
}
return false;
};
}
</script>
<script>
var fakeData = {
group1: [{ value: "group3", text: "3" }, { value: "group4", text: "4" }],
group2: [{ value: "group5", text: "5" }, { value: "group6", text: "6" }],
group3: [{ value: "group7", text: "7" }, { value: "group8", text: "8" }],
group4: [{ value: "group9", text: "9" }, { value: "group10", text: "10" }]
};
$(document).ready(function(){
// first select box change handler
$("#product_cat").on("change", function () {
var val = this.value;
$("#d").val("-1");
setUpSel($("#d"), val);
$("#d").trigger("change");
$("#d").css("display", val=="-1"?"none":"");
});
$("#d").on("change", function () {
var val = this.value;
$("#c").val("-1");
setUpSel($("#c"), val);
$("#c").trigger("change");
$("#c").css("display", val == "-1" ? "none" : "");
});
});
function setUpSel($sel, group) {
$sel.html("<option value='-1'>--Select--</option>");
var selData = fakeData[group];
$.each(selData, function (i, opt) {
$sel.append(new Option(opt.text, opt.value));
});
}
</script>