Question

我使用了一个选择框来识别用户年龄组。根据年龄组的价值，我需要显示不同的选项

例如。

<select name="age_group">
    <option value="1">15-25</option>
    <option value="2">26-35</option>
    <option value="3">35-60</option>
    <option value="4">60 or above</option>
</select>

如果用户选择第一个选项，我需要在另一个选择框中显示年龄组为1的'tbl_hobbies'（mysql表）的内容。

<select name="hobbies" id="hobbies">
    <option>watching movies</option>
    <option>playing computer games</option>
    <option>chatting</option>
</select>

对于第二个选项（26-35），我需要显示年龄组2的'tbl_hobbies'内容

<select name="hobbies" id="hobbies">
    <option>Cleaning Home</option>
    <option>Reading</option>
    <option>Travelling</option>
</select>

如何使用AJAX实现这一目标，还是在不使用AJAX的情况下实现这一目标？

Answer 1

您可以简单地将所有选项放在一起，并根据用户选择隐藏选项

<select name="hobbies" id="hobbies">
<option class="group_1">Cleaning Home</option>
<option class="group_1">Reading</option>
<option class="group_1">Travelling</option>
<option class="group_2">watching movies</option>
<option class="group_2">playing computer games</option>
<option class="group_2">chatting</option>

Answer 2

你可以像这样使用

<select id="age_select" name="age_group">
    <option value="1">15-25</option>
    <option value="2">26-35</option>
    <option value="3">35-60</option>
    <option value="4">60 or above</option>
</select>
<select name="hobbies1" id="hobbies1">
    <option>watching movies</option>
    <option>playing computer games</option>
    <option>chatting</option>
</select> 

<select name="hobbies2" id="hobbies2">
    <option>Cleaning Home</option>
    <option>Reading</option>
    <option>Travelling</option>
</select>

并且您的jquery脚本看起来像这样

<script>
$('#age_select').on('change'.function(){
  var value = $(this).val();
  if ( value == '1' ) {
      $('#hobbies1').show();
      $('#hobbies2').hide();
  } else if ( value == '2' ) {
      $('#hobbies2').show();
      $('#hobbies1').hide();
  }
});
</script>

如果你想通过ajax

$('#age_select').on('change'.function(){
     var value = $(this).val();
     var data = 'age='+value;
     $.post(
         'abc.php',
         data
     ).success(function(resp){

     });
});

Answer 3

您想要的是“动态相关下拉列表”。您可以查看非常好的演示here。

<强>算法

1. Get all the options from database              // do that using php
2. Assign classes to them according to group      // do that using php
3. Put all of them in HTML                        // do that using php
4. Show/hide on event                             // do that using jQuery/javascript

示例

<select id="age_select" name="age_group"> <option value="1">15-25</option> <option value="2">26-35</option> <option value="3">35-60</option> <option value="4">60 or above</option> </select> <select name="hobbies1" id="hobbies1"> <option value="wm" class="grp age-grp-1">watching movies</option> <option value="pcg" class="grp age-grp-1>playing computer games</option> <option value="chat" class="grp age-grp-2>chatting</option> <option value="ch" class="grp age-grp-2>Cleaning Home</option> <option value="rea" class="grp age-grp-3>Reading</option> <option value="tr" class="grp age-grp-4>Travelling</option> </select> <script type="text/javascript"> // script to execute when you change option from first dropdown $('#age_select').on('change'.function(){ var ageGrp = $(this).val(); // first, hide all options $('.grp').hide(); // show options only for selected group $('.age-grp-'+ageGrp).show(); }); </script>

希望这有帮助!!!

Answer 4

首先，向年龄组添加ID

<select name="age_group" id="age_group">

然后

$( document ).ready(function() {
    $('#age_group').change(function(){
        $.ajax({
            type: "POST",
            url: "ajax.php",
            data: { group_id: $(this).val() },
            dataType: "html"
        })
        .done(function( msg ) {
            $('#hobbies').html(msg);
        });
    });
});

在ajax.php中，你得到的所有爱好都是group_id = $ _POST ['group_id']

$sql = "SELECT name FROM tbl_hobbies WHERE group_id = ".$_POST['group_id'];
// Execute your query and put the result in a variable (example $result_query)
// Then loop it
foreach($result_query as $row) {
    echo '<option>'.$row['name'].'</option>';
}

NB：循环可能会根据您的方法更改以检索数据

显示来自mysql表的动态选择输入

4 个答案: