更改父选择选项的值时如何使特定的子选择选项出现答案

【问题标题】：How to make particular sub-select options appear when the value of the parent select option is changed更改父选择选项的值时如何使特定的子选择选项出现
【发布时间】：2020-11-08 20:42:01
【问题描述】：

我正在创建选择选项。

示例：这是我将用于类别的一种代码。当用户选择父选择的选项时，另一个选择选项将显示为该类别的子类别。

我的代码：

<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
<select>
<option value="car">car</option>
<option value="phone">phone</option>
<option value="tv">tv</option>
</select>

<select>
<option value="toyota">toyota</option>
<option value="nissan">nissan</option>
<option value="bmw">BMW</option>
</select>
</form>

【问题讨论】：

到目前为止你写了什么javascript？
是的，因为我需要答案！！！

标签： php jquery html

【解决方案1】：

$("#select1").change(function() {
  if ($(this).data('options') == undefined) {
    /*Taking an array of all options-2 and kind of embedding it on the select1*/
    $(this).data('options', $('#select2 option').clone());
  }
  var id = $(this).val();
  var options = $(this).data('options').filter('[value=' + id + ']');
  $('#select2').html(options);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="select1" id="select1">
  <option value=""></option>
  <option value="1">car</option>
  <option value="2">phone</option>
  <option value="3">tv</option>
</select>


<select name="select2" id="select2">
  <option value=""></option>
  <option value="1">toyota</option>
  <option value="1">nissan</option>
  <option value="1">bmw</option>
  <option value="2">Iphone</option>
  <option value="2">LG</option>
  <option value="2">Samsung</option>
  <option value="3">Philips</option>
  <option value="3">Samsung</option>
</select>

【讨论】：

【解决方案2】：

$("#select1").change(function () {
            if ($(this).data('options') == undefined) {
                $(this).data('options', $('#select2 option').clone());
            }
            var id = $(this).val();
            if (id == "all") {
                var options = $(this).data('options');
                $('#select2').html(options);
            }
            else {
                var options = $(this).data('options').filter('[data-name=' + id + ']');
                $('#select2').html(options);
            }
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="select1" id="select1">
        <option value="all">All</option>
        <option value="1">car</option>
        <option value="2">phone</option>
        <option value="3">tv</option>
    </select>


    <select name="select2" id="select2">
        <option value="all">All</option>
        <option data-name="1" value="toyota">toyota</option>
        <option data-name="1" value="nissan">nissan</option>
        <option data-name="1" value="bmw">bmw</option>
        <option data-name="2" value="Iphone">Iphone</option>
        <option data-name="2" value="LG">LG</option>
        <option data-name="2" value="Samsung">Samsung</option>
        <option data-name="3" value="Philips">Philips</option>
        <option data-name="3" value="Samsung">Samsung</option>
    </select>

【讨论】：

【解决方案3】：

我有一个简单的解决方案来根据国家/地区 php/javascript/Mysql 选择州

MySQL 表

country 
      country_code varhar(5),
      country_name varchar(100)

state
      country_code varhar(5),
      state_code   varchar(5),
      country_name varchar(100)

主 php 文件中的国家/州选择 main.php

<html>

   <body> 

Country
            <?php
                $sql="SELECT * FROM country order by country_name";
                $rs=$conn->Execute($sql);
                echo '<select  value="'.$country_code.'"  name="country_code"  id="country_list"   onChange="stateList(this.value);" />';
                echo  '<option value="">--Select--</option>';
                $rs->MoveFirst();
                while (!$rs->EOF) {
                    echo  '<option value="'.$rs->fields['country_code'].'"';
                    if  ($rs->fields['country_code'] == $country_code) {echo " selected";}
                    echo  '>'.$rs->fields['country_name'].'</option>';
                    $rs->MoveNext();
                }
                echo '</select>';
            ?>

State
            <?php
                $sql="SELECT * FROM state where contry_code = '$country_code' order by state_name";
                $rs=$conn->Execute($sql);
                echo '<select   value="'.$state_code.'"  name="state_code" id="state_list"   />';
                echo  '<option value="">--Select--</option>';
                $rs->MoveFirst();
                while (!$rs->EOF) {
                    echo  '<option value="'.$rs->fields['state_code'].'"';
                    if  ($rs->fields['state_code'] == $state_code) {echo " selected";}
                    echo  '>'.$rs->fields['state_name'].'</option>';
                    $rs->MoveNext();
                }
                echo '</select>';
            ?>
 </body>
</html>

Java 脚本

<script type="text/javascript">
function stateList(val) {
var select = document.getElementById( "state_list" );
var url    = "ge_statelist.php?country_code="+val;

$.post( url, function( data ) {
    $("#state_list").empty();

   var data1 = data.split("|");

    for (var x = 0; x < data1.length; x++) {
        var data2 = data1[x].split("=");
        $('#state_list').append('<option value="'+data2[0]+'"> '+data2[1]+' </option>')
    }
})
</script> 

get_stataelist.php
** In this, the result is echoing  country code=name pair seperated by '|' character
** Eg. Echoing string KL=Kerala|TN=Tamil Nadu ...... for the country IN - India

<?php
session_start();
require_once 'functions.php';
$country_code = $_GET['country_code'];
$conn        = connect_db()  //Make you own connection entry conn with Server,DB User ID, DB Password and DB Name

if  ($country_code  !=  "") {
    $sql="SELECT * FROM state where coutry_code = '$country_code'  order by country_name";
    $rs=$conn->Execute($sql);

    echo  '=--Select--';

    $rs->MoveFirst();
    while (!$rs->EOF) {
        echo  "|".$rs->fields['state_code']."=".$rs->fields['state_name'];
        $rs->MoveNext();
    }}
else  {
   echo "=--Not found--";
}

?>

【讨论】：