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>

下面是我尝试过但失败的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>");
}

});

基本上，我想做的是，如果在类型中选择了一个选项，那么大小选择将填充与之相关的选项。我该怎么做

谢谢

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

$document.readyfunction{ $type.changefunction{ var val=$this.val；如果val==item1{ $size.htmlitem1：测试1项目1：测试2； }如果val==item2，则为else{ $size.htmlitem2：测试1项目2：测试2； }如果val==item3，则为else{ $size.htmlitem3：测试1项目3：测试2； }如果val==item0，则为else{ $size.html-选择一个-； } }; }; -选择一个项目- 项目1 项目2 项目3 -选择一个-

if语句正在设置该值。你想通过这样做来比较吗

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

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

我不理解您试图实现的目标，但您需要一个事件侦听器。比如：

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

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

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

$'mainCat'。关于'change'，函数{ 所选变量=$this.val； $expertCat option.eachfunctionitem{ console.logselected； var元素=$this； console.logelement.datatag；如果element.datatag！=选中{ 元素。隐藏； }否则{ 元素.show； } } ; $expertCat.val$expertCat选项：可见：first.val； }; 纳维德爪哇语马马尔用户界面 Java Android 网状物服务器后端网

作为对@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>

您可以像这样使用switch case：

$document.readyfunction{ $type.changefunction{ 切换$this.val{ 案例“项目1”： $size.htmlitem1：测试1项目1：测试2；打破案例“项目2”： $size.htmlitem2：测试1项目2：测试2；打破案例“项目3”： $size.htmlitem3：测试1项目3：测试2；打破违约： $size.html-选择一个-； } }; }; -选择一个项目- 项目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();
});

您可能希望在处理程序中使用$this.val。在本例中，内容被重构为JavaScript数组。这大大简化了“变更”逻辑。易于维护。谢谢，这正是我需要的。我不太确定下次我会试试的谢谢！，现在我想尝试更改布局。这个示例的唯一问题是它没有设置item1的初始状态值。您需要将其更改为一个值，然后返回item1。如何设置两个选择框的选定值？例如，我为选择器1设置了item3，为选择器2设置了item3:test2，但如果我刷新页面，它就不正确了。这看起来是正确的，如果它正确，我会给你一个向上投票，但仅供参考，代码段不起作用。它起作用，但在第一次运行组合框onchange事件中，如果你更改第一个组合框的值，则不会引发此事件。这很好。。。。这是一个通过选择….来更改值的示例。。。。。在现实世界中，大多数人都会重构这段代码，使其像一个魔咒一样工作：注意，这在IE中不起作用-显示：没有人会隐藏IE中的选项。我使用了你的答案，但不得不再添加几行，以使其在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>