使用onchange选择Dropdown值

时间:2016-03-14 10:15:41

标签: javascript php html drop-down-menu

你能告诉我我做错了吗?我正在尝试选择新的下拉值。我试图通过调用一个警报函数验证我已经gopt新值,其中值输出为undefined但我能够选择id就好了。代码如下:

<?php
    require'includes/opendb.php';
    $DNS = $_GET['DNS']
?>
<html>
    <head>

    </head>

    <body>
        <p>
            This section allows you to connect Uplink ports to different switches. Be sure that all the information is correct before you submit.
        </p>
        <form action="" method="post" enctype = "multipart/form-data">
            <table border = 1>
                <tr>
                    <td>DNS From</td>
                    <td>DNS To</td>
                </tr>
                    <?php
                        $DNS_FROM = $DNS."_port-%";
                        $select = "SELECT * FROM `uplink_port_mapping` WHERE DNS_From LIKE '$DNS_FROM'";
                        $select1 = mysqli_query($conn, $select);
                        $select2 = "SELECT DNS_From FROM `uplink_port_mapping` WHERE DNS_From NOT LIKE '$DNS_FROM' AND DNS_To = ''";
                        $select3 = mysqli_query($conn, $select2);
                        $i = 0;
                        while($uplink_from = mysqli_fetch_assoc($select1)){
                            echo "<tr>";
                                echo "<td>".$uplink_from['DNS_From']."</td>";
                                echo "<td>"."<select name = 'uplink_to_".$i."' id = 'uplink_to_".$i."' Onchange = 'dropdown(this)'> 
                                    <option value = '".$uplink_from['DNS_To']."' selected='selected'>". $uplink_from['DNS_To']."</option>";

                                mysqli_data_seek($select3, 0);

                                while($uplink_to = mysqli_fetch_assoc($select3)){
                                    echo "<option value='".$uplink_to['DNS_From']."'>".$uplink_to['DNS_From']."</option>";
                                }
                                echo"</select>";
                                echo"</td>";
                            echo"</tr>";
                            ++$i;
                        }
                    ?>
            </table>
        </form>
    </body>
</html>
<script>
    function dropdown(checkbox){
        var id = checkbox.id;
        var value = checkbox.val;
        alert("You have changed "+id+" to "+value)
    }
</script>

来自CHROME源的HTML版本

<html>
    <head>

    </head>

    <body>
        <p>
            This section allows you to connect Uplink ports to different switches. Be sure that all the information is correct before you submit.
        </p>
        <form action="" method="post" enctype = "multipart/form-data">
            <table border = 1>
                <tr>
                    <td>DNS From</td>
                    <td>DNS To</td>
                </tr>
                    <tr><td>HEPSAN02_port-00</td><td><select name = 'uplink_to_0' id = 'uplink_to_0' Onchange = 'dropdown(this)'> 
                                    <option value = 'HEPSAN5_port-00' selected='selected'>HEPSAN5_port-00</option><option value='HEPSAN03_port-24'>HEPSAN03_port-24</option><option value='HEPSAN1_port-01'>HEPSAN1_port-01</option><option value='HEPSAN1_port-02'>HEPSAN1_port-02</option><option value='HEPSAN4_port-18'>HEPSAN4_port-18</option><option value='HEPSAN4_port-19'>HEPSAN4_port-19</option></select></td></tr><tr><td>HEPSAN02_port-01</td><td><select name = 'uplink_to_1' id = 'uplink_to_1' Onchange = 'dropdown(this)'> 
                                    <option value = 'HEPSAN5_port-01' selected='selected'>HEPSAN5_port-01</option><option value='HEPSAN03_port-24'>HEPSAN03_port-24</option><option value='HEPSAN1_port-01'>HEPSAN1_port-01</option><option value='HEPSAN1_port-02'>HEPSAN1_port-02</option><option value='HEPSAN4_port-18'>HEPSAN4_port-18</option><option value='HEPSAN4_port-19'>HEPSAN4_port-19</option></select></td></tr><tr><td>HEPSAN02_port-02</td><td><select name = 'uplink_to_2' id = 'uplink_to_2' Onchange = 'dropdown(this)'> 
                                    <option value = '' selected='selected'></option><option value='HEPSAN03_port-24'>HEPSAN03_port-24</option><option value='HEPSAN1_port-01'>HEPSAN1_port-01</option><option value='HEPSAN1_port-02'>HEPSAN1_port-02</option><option value='HEPSAN4_port-18'>HEPSAN4_port-18</option><option value='HEPSAN4_port-19'>HEPSAN4_port-19</option></select></td></tr>           </table>
        </form>
    </body>
</html>
<script>
    function dropdown(checkbox){
        var id = checkbox.id;
        var value = checkbox.val;
        alert("You have changed "+id+" to "+value)
    }
</script>

感谢您的帮助:)

1 个答案:

答案 0 :(得分:1)

所做的更改

var value = checkbox.val; var value = checkbox.value;

工作演示

&#13;
&#13;
function dropdown(checkbox) {
  var id = checkbox.id;
  var value = checkbox.value;
  alert("You have changed " + id + " to " + value)
}
&#13;
<p>
  This section allows you to connect Uplink ports to different switches. Be sure that all the information is correct before you submit.
</p>
<form action="" method="post" enctype="multipart/form-data">
  <table border=1>
    <tr>
      <td>DNS From</td>
      <td>DNS To</td>
    </tr>
    <tr>
      <td>HEPSAN02_port-00</td>
      <td>
        <select name='uplink_to_0' id='uplink_to_0' Onchange='dropdown(this)'>
          <option value='HEPSAN5_port-00' selected='selected'>HEPSAN5_port-00</option>
          <option value='HEPSAN03_port-24'>HEPSAN03_port-24</option>
          <option value='HEPSAN1_port-01'>HEPSAN1_port-01</option>
          <option value='HEPSAN1_port-02'>HEPSAN1_port-02</option>
          <option value='HEPSAN4_port-18'>HEPSAN4_port-18</option>
          <option value='HEPSAN4_port-19'>HEPSAN4_port-19</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>HEPSAN02_port-01</td>
      <td>
        <select name='uplink_to_1' id='uplink_to_1' Onchange='dropdown(this)'>
          <option value='HEPSAN5_port-01' selected='selected'>HEPSAN5_port-01</option>
          <option value='HEPSAN03_port-24'>HEPSAN03_port-24</option>
          <option value='HEPSAN1_port-01'>HEPSAN1_port-01</option>
          <option value='HEPSAN1_port-02'>HEPSAN1_port-02</option>
          <option value='HEPSAN4_port-18'>HEPSAN4_port-18</option>
          <option value='HEPSAN4_port-19'>HEPSAN4_port-19</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>HEPSAN02_port-02</td>
      <td>
        <select name='uplink_to_2' id='uplink_to_2' Onchange='dropdown(this)'>
          <option value='' selected='selected'></option>
          <option value='HEPSAN03_port-24'>HEPSAN03_port-24</option>
          <option value='HEPSAN1_port-01'>HEPSAN1_port-01</option>
          <option value='HEPSAN1_port-02'>HEPSAN1_port-02</option>
          <option value='HEPSAN4_port-18'>HEPSAN4_port-18</option>
          <option value='HEPSAN4_port-19'>HEPSAN4_port-19</option>
        </select>
      </td>
    </tr>
  </table>
</form>
&#13;
&#13;
&#13;