Question

有人可以帮帮我吗？我试过在很多方面这样做，但我做不到。

基本上在我的网页上，我有一个下拉框（国家/地区）和一个自动完成列表（状态）。在国家下拉框中，我有两个值（“印度”和“美国”）。状态自动完成列表包含6个值（“德里”，“阿萨姆”，“泰米尔纳德”，“阿拉巴马”，“阿拉斯加”，“佛罗里达”）。所以这就是我的要求，例如，如果用户在国家/地区文本框中选择“印度”，那么，只有 印度各州（“德里”，“阿萨姆”，“泰米尔纳德”）应该可见或可供他在自动填写列表中选择 并且美国各州不应该对用户可见。 类似地，当用户在国家/地区下拉文本框中选择US时，则只有美国状态应该在状态自动完成列表中可供用户选择。

有些人可以帮我一个代码示例.....

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>demo</title>
        <link rel="stylesheet" href="jquery-ui.css" />
        <script src="jquery-1.9.1.js"></script>
        <script src="jquery-ui.js"></script>

        <script>
          $(function() {
            var collegetypes = [
              "Delhi",
              "Assam",
              "Tamil Nadu",
              "Alabama",
              "Alaska",
              "Florida"
            ];
            $( "#istate" ).autocomplete({
              source: collegetypes
            });
          });
      </script>
    </head>
    <body>
    <?php
        $country = ( !empty( $_REQUEST['COUNTRY'] ) ? $_REQUEST['COUNTRY'] : null );
        $state = ( !empty( $_REQUEST['STATE'] ) ? $_REQUEST['STATE'] : null );

    ?>
        Ajax load<BR>
            <form id="myForm" action='test1.php' method='GET' rel="history">
                Country <BR>
                <select name="COUNTRY"  value="<?=$country;?>">
                <option value="India" <?= ($country === 'India' ? 'selected="selected"' : '')?> >India</option>
                <option value="US" <?= ($country === 'US' ? 'selected="selected"' : '')?> >US</option>
                </select><BR> <BR>
                State <BR>
                <input type="text" name="STATE" id="istate" value="<?=$state;?>"> <BR> <BR>
                <input id="sub" type="submit" value="Search" align="centre"/>
            </form>

            <!--other part of code!-->
    </body> 
</html>

Answer 1

试试这个：

HTML

<form id="myForm" action='test1.php' method='GET' rel="history">
    Country <BR>
    <select name="COUNTRY"  id="country" >
    <option value="India" >India</option>
    <option value="US">US</option>
    </select><BR> <BR>
    State <BR>
    <input type="text" name="STATE" id="istate" value=""> <BR> <BR>
    <input id="sub" type="submit" value="Search" align="centre"/>
</form>

JS

$(function() {
    var collegetypesIndia = [
        "Delhi",
        "Assam",
        "Tamil Nadu"
    ];
    var collegetypesUS = [

        "Alabama",
        "Alaska",
        "Florida"
    ];
    $('#country').change(function(){
        if( $('#country').val() == 'India' )
        {
            $( "#istate" ).autocomplete({'source':collegetypesIndia});
        }
        else
        {
            $( "#istate" ).autocomplete({'source':collegetypesUS});
        }
    }); 
    $('#country').change();   
});

查看： http://jsfiddle.net/GM6Fk/1/

应根据在另一个文本框中选择的值显示自动完成值

1 个答案: