Question

我有一个下拉菜单，当我在第一个下拉列表中选择一个选项时，我想要显示另一个下拉菜单的div。

为此，我在每个选项标签上都使用了onClick函数。每个选项都有不同的div。问题是;当我选择一个选项时，它不会显示div。

这是我的代码：

<select name="first">

  <option selected; value="" disabled="disabled">Select an Option</option> 

  <option value="all">Select All</option>   
  <option value="Sno">Sno</option>
  <option value="name" onclick="showMe('namediv',this)" onclick="ckChnage(this)">Name</option>
  <option value="course" onclick="showMe('coursediv',this)" >Mauza</option>
  </select>
  <div id="namediv" style="display: none";>
    <select name="firstres" id="firstres"><option style="display:none;" selected; value="">---Select an option---</option>
<?php 
   $sql="SELECT * FROM table ";     
   $result = mysql_query($sql);

   while ($row = mysql_fetch_array($result)) 
   {
      echo "<option  value=' " . $row['Sno'] ."'>" . $row['name'] ."</option>";
   }
?>
    </select>
</div>

Answer 1

对于selecet，您必须使用onchang

在这里，您可以了解它：https://www.w3schools.com/jsref/event_onchange.asp

function myFunction() {
    var x = document.getElementById("select").value;
       if(x == "course"){
        document.getElementById('coursediv').style.display="block";
    } 
}

<select name="first" onchange="myFunction()" id="select">

  <option selected; value="" disabled="disabled">Select an Option</option> 

  <option value="all">Select All</option>   
  <option value="Sno">Sno</option>
  <option value="name">Name</option>
  <option value="course">Mauza</option>
  </select>
<div id="coursediv" style="display:none">I am coursediv dive</div>

Answer 2

onclick不适用于option代码，您可能希望在onchange代码上使用select事件

修改：由于您希望隐藏所有其他div，您可以先隐藏所有div，然后显示所选的div

function showMe(element){
  if ( element.value==='all' ) {
    document.getElementById( 'Snodiv'    ).style.display = 'block';
    document.getElementById( 'namediv'   ).style.display = 'block';
    document.getElementById( 'coursediv' ).style.display = 'block';
  } else {
    document.getElementById( 'Snodiv'    ).style.display = 'none';
    document.getElementById( 'namediv'   ).style.display = 'none';
    document.getElementById( 'coursediv' ).style.display = 'none';
    
    var div = document.getElementById( element.value + "div" );
  
    if ( div ) {
      div.style.display = 'block';
    }
  }
}

<select name="first" onchange="showMe(this)">

  <option selected value="" disabled="disabled">
    Select an Option
  </option> 
  <option value="all">Select All</option>   
  <option value="Sno">Sno</option>
  <option value="name">Name</option>
  <option value="course">Mauza</option>
</select>

<div id="Snodiv" style="display: none";>
    Sno
    <select name="firstres" id="firstres">
      <option selected value="">
        ---Select an option---
      </option>
      <option value="some-option">Some option</option>
    </select>
</div>

<div id="namediv" style="display: none";>
    Name
    <select name="firstres" id="firstres">
      <option selected value="">
        ---Select an option---
      </option>
      <option value="some-option">Some option</option>
    </select>
</div>

<div id="coursediv" style="display: none";>
    Mauza
    <select name="firstres" id="firstres">
      <option selected value="">
        ---Select an option---
      </option>
      <option value="some-option">Some option</option>
    </select>
</div>

Answer 3

使用onclick无法达到你想要的效果，因为你有一个下拉元素。

您需要使用onChange而不是onClick，因为您需要检查“下拉列表”何时“更改”。

请参阅numpy.where以获取有关onChange的更多信息。

您需要将代码更改为：

<script>
$(function(){
    $("#first_select").change(function(){
        if(this.value == "course"){
            showMe('coursediv',this);
        } 
    });
});
</script>

我添加了一个ID作为脚本的参考。您可以通过多种方式实现这一点，我只是喜欢这种方式。

showMe

我们会检查您的第一个下拉元素何时更改，以及何时触发#!/usr/bin/env bash foo_type=`type foo`; if [[ -z "$foo_type" ]]; then . "$HOME/.foo/shell.sh" fi 'foo' "$@" ### this calls this script not the bash function in shell.sh功能。在我的回答中，我首先检查了所选元素是否为“课程”，如果是，那么我们将显示“coursediv”。您也可以在那里添加其他选项，以显示您需要显示的内容。

onClick功能不起作用

3 个答案: