如何根据所选下拉列表的值按ID隐藏和显示div-JQuery和Javascript

我是javascript新手，我试图根据所选下拉列表的分组值显示/隐藏潜水，但是我下面的代码不起作用

    <script type="text/javascript">


     $(document).ready(function(){ 

        document.getElementById("Divid").style.display = "none"; //Div I am hiding
    $(document).ready(function(){ 
    $('#selectsample').change(function(){
      var val = $(this).val(); // replace $(this) which refer to select box for which change event occurred
      //var $option= $(this).find('option:selected'); -- you can use this option too
      var $option= $(this).find('option[value=' + val + ']');
      var val1 = $option.attr('grouping');

      $("#txt1").val($option.attr(val1));// this is my textfield id=txt1
    }).change();
       if (val1='Yes'){
      document.getElementById("Divid").style.display = "block"; 
}
else{  document.getElementById("Divid").style.display = "none"; }

      });


    </script>

这个呢

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selectsample" name="samp">
    <option value="1" grouping="Yes"  >first</option>
    <option value="2" grouping="No"  >four</option>
</select>
<input type='text' id='txt1'>

第一
四

您的代码几乎没有问题

首先，您有一个嵌套的

$（document）.ready

，这毫无意义

其次是

$（“#txt1”）.val（$option.attr（val1））-这一行也没有意义，因为您只需执行
$（“#txt1”）.val（val1）和您的输入将正确填充

最后，
if（val1='Yes'）
是错误的，一个等号是赋值，比较是两个/三个等号，要修复它，只需将其替换为
if（val1='Yes'）

我假设id为“Divid”的div在您的示例中被误用了

另外，正如所指出的，一个好的实践是使用提供的jQuery方法来选择元素，因为您已经在使用jQuery框架

这意味着元素选择器，例如：

document.getElementById（“Divid”）
可以在jQuery中写成
$（“#Divid”）

请注意前导的#符号，它告诉jQuery它正在选择一个ID属性，如果要按类选择元素，则将使用“.”，而后者将返回一个元素数组

这里有一个给你的runnable


$（文档）.ready（函数（）{
$（“#Divid”）.css（“display”，“none”）；//我正在隐藏的Div也可以使用.hide（）
$（'#selectsample'）。更改（函数（）{
var val=$（this）.val（）；//替换$（this），它引用发生更改事件的选择框
//var$option=$（this）.find（'option:selected'）；--您也可以使用此选项
var$option=$（this.find（'option[value='+val+']）；
var val1=$option.attr（'grouping'）；
$（“#txt1”）.val（val1）；//这是我的textfield id=txt1
如果（val1=='Yes'）{
$（“#Divid”）.css（“显示”、“块”）；
}否则{
$（“#Divid”）.css（“显示”、“无”）；
}
}).change（）；
});

第一
四
您的代码几乎没有问题

首先，您有一个嵌套的
$（document）.ready
，这毫无意义

其次是
$（“#txt1”）.val（$option.attr（val1））-这一行也没有意义，因为您只需执行
$（“#txt1”）.val（val1）和您的输入将正确填充

最后，
if（val1='Yes'）
是错误的，一个等号是赋值，比较是两个/三个等号，要修复它，只需将其替换为
if（val1='Yes'）

我假设id为“Divid”的div在您的示例中被误用了

另外，正如所指出的，一个好的实践是使用提供的jQuery方法来选择元素，因为您已经在使用jQuery框架

这意味着元素选择器，例如：

document.getElementById（“Divid”）
可以在jQuery中写成
$（“#Divid”）

请注意前导的#符号，它告诉jQuery它正在选择一个ID属性，如果要按类选择元素，则将使用“.”，而后者将返回一个元素数组

这里有一个给你的runnable


$（文档）.ready（函数（）{
$（“#Divid”）.css（“display”，“none”）；//我正在隐藏的Div也可以使用.hide（）
$（'#selectsample'）。更改（函数（）{
var val=$（this）.val（）；//替换$（this），它引用发生更改事件的选择框
//var$option=$（this）.find（'option:selected'）；--您也可以使用此选项
var$option=$（this.find（'option[value='+val+']）；
var val1=$option.attr（'grouping'）；
$（“#txt1”）.val（val1）；//这是我的textfield id=txt1
如果（val1=='Yes'）{
$（“#Divid”）.css（“显示”、“块”）；
}否则{
$（“#Divid”）.css（“显示”、“无”）；
}
}).change（）；
});

第一
四
给你试试这个


$（文档）.ready（函数（）{
$（“#选择样本”）。单击（函数（）{
var status=$（“#selectsample选项：selected”）.attr（“分组”）；
如果（状态=“是”）{
$（“#Divid”）.show（）；
}否则{
$（“#Divid”）.hide（）；
}
});
});

第一
四
div id是=“Divid”当selected为yes时，这是我希望看到的一个
给你试试这个


$（文档）.ready（函数（）{
$（“#选择样本”）。单击（函数（）{
var status=$（“#selectsample选项：selected”）.attr（“分组”）；
如果（状态=“是”）{
$（“#Divid”）.show（）；
}否则{
$（“#Divid”）.hide（）；
}
});
});

第一
四
div id是=“Divid”当selected为yes时，这是我希望看到的一个
试试这个

function ShowHideDiv()
{
    var groupattr = $("option:selected", "#selectsample").attr("grouping");
    if (groupattr == "Yes")
        {
            $("#Divid").show();
        }
    else
        {
            $("#Divid").hide();
        }
}

$(document).ready(function () {
    //Let's run this once in case "Yes" is the default (first) option in the dropdown
        ShowHideDiv();
    $("#selectsample").on("change", function () {
        ShowHideDiv();
    });
});

试试这个

function ShowHideDiv()
{
    var groupattr = $("option:selected", "#selectsample").attr("grouping");
    if (groupattr == "Yes")
        {
            $("#Divid").show();
        }
    else
        {
            $("#Divid").hide();
        }
}

$(document).ready(function () {
    //Let's run this once in case "Yes" is the default (first) option in the dropdown
        ShowHideDiv();
    $("#selectsample").on("change", function () {
        ShowHideDiv();
    });
});

未显示
。请提供足够的相关html，以创建一个包含jQuery的应用程序，然后使用jQuery。不要执行
document.getElementById（“Divid”）.style.display=“无”。执行
$（'#Divid'）.hide（）
等操作。如果不打算使用它，则包含它有什么意义？未显示
。请提供足够的相关html，以创建一个包含jQuery的应用程序，然后使用jQuery。不要执行
document.getElementById（“Divid”）.style.display=“无”。执行
$（'#Divid'）.hide（）
等操作。如果您不打算使用它，那么包含它有什么意义？使用所有jQuery方法或所有本机方法时要更加干净，并帮助初学者掌握最佳方法practices@charlietfl你说得对，我故意错过了那一个，不是为了修改原始代码，然而，在回答中加上解释。也就是说，其他答案根本不能帮助“初学者”学习p
function ShowHideDiv()
{
    var groupattr = $("option:selected", "#selectsample").attr("grouping");
    if (groupattr == "Yes")
        {
            $("#Divid").show();
        }
    else
        {
            $("#Divid").hide();
        }
}

$(document).ready(function () {
    //Let's run this once in case "Yes" is the default (first) option in the dropdown
        ShowHideDiv();
    $("#selectsample").on("change", function () {
        ShowHideDiv();
    });
});