Jquery 如何基于另一个选择选项更改选择选项？_Jquery

Jquery 如何基于另一个选择选项更改选择选项？

jquery

Jquery 如何基于另一个选择选项更改选择选项？,jquery,Jquery,这是我的html <select id="type"> <option value="item1">item1</option> <option value="item2">item2</option> <option value="item3">item3</option> </select> <select id="size"> <option value="">-- s

这是我的html

<select id="type">
<option value="item1">item1</option>
<option value="item2">item2</option>
<option value="item3">item3</option>
</select>

<select id="size">
<option value="">-- select one -- </option>
</select>


项目1
项目2
项目3
--选择一个--

下面是我尝试过但失败的jquery

$(document).ready(function() {

if( $("#type").val("item1"))
{
  $("#size").html("<option value='test'>test</option><option value="test2">test2</option>);
}
elseif( $("#type").val("item2"))
{
   $("#size").html("<option value='anothertest1'>anothertest1</option>");
}

});

$（文档）.ready（函数（）{
if（$（“#type”）.val（“item1”））
{
$（“#size”）.html（“test2）；
}
elseif（$（“#type”）.val（“item2”））
{
$（“#size”）.html（“其他测试1”）；
}
});

基本上，我想做的是，如果在#type中选择了一个选项，那么选择的大小将填充与之相关的选项。我如何做到这一点

谢谢

下面是一个您正在尝试做的示例=>

$（文档）.ready（函数（）{
$（“#type”）.change（函数（）{
var val=$（this.val（）；
如果（val==“项目1”）{
$（“#size”）.html（“item1:test1item1:test2”）；
}否则如果（val==“项目2”）{
$（“#size”）.html（“item2:test 1item2:test 2”）；
}否则如果（val==“项目3”）{
$（“#size”）.html（“item3:test 1item3:test 2”）；
}否则，如果（val==“item0”）{
$（“#size”）.html（“--select one--”）；
}
});
})；


--选择一个项目--
项目1
项目2
项目3
--选择一个--

您的if语句正在设置值。您希望通过执行此操作进行比较

if ($("#type").val() == "item1") {
 ...
}

不过daLizard是对的。您需要一个事件处理程序。document.ready仅在页面DOM准备好使用时运行一次。

我不明白您想要实现什么，但您需要一个事件侦听器。类似于：

$('#type').change(function() {
   alert('Value changed to ' + $(this).attr('value'));
});

这将为您提供所选选项标记的值。

您可以在html5中使用数据标记，并使用以下代码执行此操作：


$（'#mainCat'）。在（'change'，function（）上{
所选变量=$（this.val（）；
$（“#expertCat选项”）。每个（功能（项目）{
console.log（选中）；
var元素=$（此）；
console.log（element.data（“tag”））；
如果（元素数据（“标记”）！=选中）{
元素。隐藏（）；
}否则{
元素show（）；
}
}) ; 
$（“#expertCat”）.val（$（“#expertCat选项：可见：第一”）.val（））；
});


纳维德
爪哇语
马马尔
用户界面
Java Android
网状物
服务器
后端
.net

作为对@Navid_pdp11的补充回答，它将允许选择第一个可见项并在文档加载时工作。将以下内容放在您的身体标签下方

<script>
$('#mainCat').on('change', function() {
    let selected = $(this).val();
    $("#expertCat option").each(function(){
        let element =  $(this) ;
        if (element.data("tag") != selected){
            element.removeClass('visible');
            element.addClass('hidden');
            element.hide() ;
        }else{
            element.removeClass('hidden');
            element.addClass('visible');
            element.show();
        }
    });
    let expertCat = $('#expertCat');
    expertCat.prop('selectedIndex',expertCat.find("option.visible:eq(0)").index());
}).triggerHandler('change');
</script>


$（'#mainCat'）。在（'change'，function（）上{
让选定项=$（this.val（）；
$（“#expertCat选项”）。每个（函数（）{
让元素=$（this）；
如果（元素数据（“标记”）！=选中）{
element.removeClass（'visible'）；
元素addClass（'hidden'）；
元素。隐藏（）；
}否则{
element.removeClass（'hidden'）；
元素addClass（'visible'）；
元素show（）；
}
});
设expertCat=$（“#expertCat”）；
expertCat.prop（'selectedIndex'，expertCat.find（“option.visible:eq（0）”）.index（））；
}).triggerHandler（“变更”）；

您可以像这样使用开关盒：

$（文档）.ready（函数（）{
$（“#type”）.change（函数（）{
开关（$（this.val（））{
案例“项目1”：
$（“#size”）.html（“item1:test1item1:test2”）；
打破
案例“项目2”：
$（“#size”）.html（“item2:test 1item2:test 2”）；
打破
案例“项目3”：
$（“#size”）.html（“item3:test 1item3:test 2”）；
打破
违约：
$（“#size”）.html（“--select one--”）；
}
});
})；


--选择一个项目--
项目1
项目2
项目3
--选择一个--

以下是我使用Jquery过滤器的简单解决方案

$('#publisher').on('change', function(e) {
   let selector = $(this).val();
   $("#site > option").hide();
   $("#site > option").filter(function(){return $(this).data('pub') == selector}).show();
});


选择一个
一个
两个
三
选择一个
函数myFunction（）{
var x=document.index.in.value；
如果（x=“一”）{
document.getElementById（'select'）.innerHTML=“ATwo”；
}
}

您可能想使用$（this）.val（）在处理程序中。这里甚至有一个更清晰的示例。在本例中，内容被重构为JavaScript数组。这极大地简化了“更改”逻辑。更易于维护。感谢这正是我所需要的。我不太确定是否尝试==下次我将尝试Thank.greaaaaaat answer！，现在我想尝试更改布局。唯一的问题是w在这个示例中（按原样），它没有设置（item1的）初始状态的值。您需要将其更改为一个值，然后返回到项1。如何设置两个选择框的选定值？例如，我为选择器1设置了项3，为选择器2设置了项3:test2，但如果我刷新页面，它将不正确。这看起来像是一种方法，如果正确，我将向上投票，但仅供参考，代码段不起作用。它起作用，但在第一次运行组合框onchange事件中，如果您更改第一个组合框的值，则不会引发此事件。此操作很好…这是一个通过选择来更改值的示例…对于现实世界，您大多数情况下都会重构此代码以使其像一个符咒一样工作：）注意，这在IE中不起作用--显示：无不会隐藏IE中的选项。我使用了您的答案，但必须添加几个more线，使其在IE中工作

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form name="index">
<select name="in" onchange="myFunction()">
<option>Select One</option>
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
<select id="select">
<option>Select One</option>
</select>
</form>
</body>
</html>
<script>
function myFunction(){
var x=document.index.in.value;
if(x=="One"){
document.getElementById('select').innerHTML="<option>A</option><option>Two</option>";
}
}
</script>