Question

我无法在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();
        }
    });
});

我想在选择＆＃34; SALE＆＃34;的值后显示div。将选项的选项值更改为＆＃34; SALE＆＃34;。

时，不会显示隐藏的div

Answer 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>

Answer 2

我不知道为什么你的代码不起作用，但你可以使用$(document).ready(function() { $('#rentsalelease').change(function() { if (this.value == 'SALE') { $("#salevalue").show(); } else { $("#salevalue").hide(); } }); });函数实现相同的结果：

{{1}}

以下是Jsfiddle

希望有所帮助：）

在javascript / html选择选项中使用onchange函数显示隐藏div的麻烦

2 个答案: