Question

我想只在从下拉列表中选择“其他”选项时显示div。否则它总是显示无...我尝试javascript但它显示所有时间选择任何选项..

<form>   
    <span style="font: 13px/19px Helvetica Neue, Arial, sans-serif; font-weight: bold;">Category</span><br>

    <select name="category" id="category" onchange="showHide();">
        
        <option value="0">----Select Category----</option>
        <option value="Accountants">Accountants</option>
        <option value="Solicitors">Solicitors</option>
        <option value="Bankers">Bankers</option>
        <option value="Others">Others</option>
    </select>

    <script type="text/javascript">
        function showHide() 
        {
            document.getElementById("foo").style.display = "block";
        }
    </script>
   
    <div id="foo" style="display:none;">
        <span style="font: 13px/19px Helvetica Neue, Arial, sans-serif; font-weight: bold;">Other Category</span><br>
        <input type="" name="other" placeholder="other" style="margin-top: 10px; padding: 7px; margin-bottom: 10px; font: 13px/19px "Helvetica Neue", Arial, sans-serif; "><br>
    </div>
	
	<input type="submit" name="submit" value="Register" style="margin-top: 10px; margin-bottom: 10px; " class="btn" >
</form>

plz help ....提前感谢

Answer 1

试试这段代码：

＆＃13;

<form>   
 <span style="font: 13px/19px Helvetica Neue, Arial, sans-serif; font-weight: bold;">Category</span><br>

	<select name="category" id="category" onchange="showHide(this);">
        
        <option value="0">----Select Category----</option>
        <option value="Accountants">Accountants</option>
        <option value="Solicitors">Solicitors</option>
        <option value="Bankers">Bankers</option>
        <option value="Others">Others</option>
        </select>

<script type="text/javascript">
    function showHide(that) {
         if(that.value == "Others") {
            document.getElementById("foo").style.display = "block";
         } else {
            document.getElementById("foo").style.display = "none";
         }
    }
</script>
   
 <div id="foo" style="display:none;">
 <span style="font: 13px/19px Helvetica Neue, Arial, sans-serif; font-weight: bold;">Other Category</span><br>
 <input type="" name="other" placeholder="other" style="margin-top: 10px; padding: 7px; margin-bottom: 10px; font: 13px/19px "Helvetica Neue", Arial, sans-serif; "><br>
</div>
	
  <input type="submit" name="submit" value="Register" style="margin-top: 10px; margin-bottom: 10px; " class="btn" >
</form>

＆＃13;

说明：我做了什么：

我在javascript函数中添加了条件：

if(that.value == "Others")

如果选择的选项值为其他，则会显示div。

我已使用this传递了函数中的下拉对象。使用此对象，我可以获得所选选项的值。之后，如果有条件，我会办理入住手续。

Answer 2

我更改了你的onchange函数，只是在将其他控件样式更改为阻止之前检查所选值是否为Others

function showHide() {
    var e = document.getElementById("category");
    if(e.options[e.selectedIndex].value = "Others") {
        document.getElementById("foo").style.display = "block";
    }
}

Answer 3

您应该检查＆＃34; showHide＆＃34;中选择元素的值。功能。你的＆＃34; showHide＆＃34;函数当前将始终显示元素。

Answer 4

您可以设置相同的条件：

function showHide(elem) { // this reference passed from markup
    if (elem.value.toLowerCase().trim() === "others") { // check for 'others'
        document.getElementById("foo").style.display = "block";
    }
    else{
        document.getElementById("foo").style.display = "none";
    }
}

您需要将this作为对函数showHide(this)

的引用

<select name="category" id="category" onchange="showHide(this);"></select>

Demo

Answer 5

我处理的代码对我来说很好。

<form>   
  <span style="font: 13px/19px Helvetica Neue, Arial, sans-serif; font-weight: bold;">Category</span><br>
  <select name="category" id="category" onchange="showHide(this);">

    <option value="0">----Select Category----</option>
    <option value="Accountants">Accountants</option>
    <option value="Solicitors">Solicitors</option>
    <option value="Bankers">Bankers</option>
    <option value="Others">Others</option>
  </select>

  <script type="text/javascript">
    function showHide(that) 
    {
         if(that.value == "Others")
         var other = document.getElementById("otr");
         other.style.display = "block";
    }
  </script>

  <div id="otr" style="display:none;">
    <span style="font: 13px/19px Helvetica Neue, Arial, sans-serif; font-weight: bold;">Other Category</span><br>
    <input type="" name="other" placeholder="other" style="margin-top: 10px; padding: 7px; margin-bottom: 10px; font: 13px/19px "Helvetica Neue", Arial, sans-serif; "><br>
  </div>

  <input type="submit" name="submit" value="Register" style="margin-top: 10px; margin-bottom: 10px; " class="btn" >
</form>

仅当下拉列表中的选择值正确时才显示div

5 个答案:

Demo