在 javascript/html 选择选项中显示带有 onchange 函数的隐藏 div 时出现问题答案

【问题标题】：trouble showing hidden div with onchange function in javascript/html select option在 javascript/html 选择选项中显示带有 onchange 函数的隐藏 div 时出现问题
【发布时间】：2016-10-07 07:35:17
【问题描述】：

我在 html/javascript 中显示和隐藏 div 时遇到问题。

<html>

<body>
    <form name="saleproperty" action="" method="POST" onsubmit="return CommonFunction(this);">
        <select id='rentsalelease'> 
     <option value="RENT">RENT</option> 
     <option value="SALE">SALE</option> 
     <option value="LEASE">LEASE</option>
    </select>
        <div style='display:none;' id='salevalue'>Sale Value<br/>
            <input type='text' name='business' size='20' />
        </div>
    </form>
</body>

</html>

脚本

$(document).ready(function() {
    $('#rentsalelease').on('change', function() {
        if (this.value == 'SALE') {
            $("#salevalue").show();
        } else {
            $("#salevalue").hide();
        }
    });
});

我想在选择值为“SALE”的选项后显示 div。将选择的选项值更改为“SALE”时，隐藏的 div 不显示。

【问题讨论】：

你添加了对jQuery库的引用吗？

标签： javascript jquery html

【解决方案1】：

 i just added ajax library url to your code

<html> 
<body>  
<form name="saleproperty" action="" method="POST"
onsubmit="return CommonFunction(this);" > 
<select id='rentsalelease'> 
 <option value="RENT">RENT</option> 
 <option value="SALE">SALE</option> 
 <option value="LEASE">LEASE</option>
</select> 
<div style='display:none;' id='salevalue'>Sale Value<br/>
   <input type='text' name='business'  size='20' />
 </div> 
</form> 
</body> 
</html> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script> 

 $(document).ready(function(){
    $('#rentsalelease').on('change', function() {
      if ( this.value == 'SALE')
      //.....................^.......
      {
        $("#salevalue").show();
      }
      else
      {
        $("#salevalue").hide();
      }
    });
});
 </script>

【讨论】：

最好描述 ios 的问题以及您为解决问题所做的更改，而不是简单地发布可能或可能不明显更改的代码。
@Sanjay Kumar 22 我刚刚将 jquery ajax 库 url 添加到您的代码中。
是的，它是在添加 ajax 库之后工作的，但是否必须添加 ajax 库？我对 jquery 很陌生
有没有不加ajax库url的选项
@SanjayKumar22 是的，如果不包含它的库，jquery 将无法工作阅读有关 jquery 的一些教程

【解决方案2】：

我不知道为什么您的代码不起作用，但您可以使用 change 函数获得相同的结果，如下所示：

$(document).ready(function() {
   $('#rentsalelease').change(function() {
     if (this.value == 'SALE') {
       $("#salevalue").show();
     } else {
       $("#salevalue").hide();
     }
   });
});

这里是Jsfiddle

希望对你有帮助:)

【讨论】：

是不是 .change() 只是 .on('change',...) 的简写方式？