如何在不使用提交的情况下从下拉列表中选择值

Posted 2023-03-14

【中文标题】如何在不使用提交的情况下从下拉列表中选择值

【英文标题】：How to select value from dropdown without using submit

【发布时间】：2015-12-22 00:46:52

【问题描述】：

我有两个下拉列表：州和城市。两者都是相同的形式。目标是在不单击提交按钮的情况下以某种方式保存选择，以便它可以用作在第二个下拉列表中显示城市选择的标准。 例如：在第一个下拉菜单中选择 california 时，第二个 dropdwon 会显示加利福尼亚的所有城市。

代码：

<?php $db= DB::table('states_table')->get(); ?>
<select class="form-control input-md" name="state">
    <option value="" disabled selected>Choose the state</option>
    <?php foreach ($db as $data)  ?>
        <option value="<?php echo $data->city; ?>">
        <?php echo $data->city;?>
        </option><?php 
    ?>
</select>   

【问题讨论】：

不需要提交就可以使用AJAX填写城市下拉列表

我想让它尽可能简单，我对AJAX一无所知，选择时不点击提交就不能保存选择而不使用它吗？

我认为如果你使用比提交更简单的 AJAX，假设用户经常更改选择框或者一旦选择错误的状态，那么你将在 DB 中保存每个数据。

如果你不想死板地使用Ajax，你可以先使用iframe。将表单目标设置为 iframe 并隐藏该 iframe .. 现在在下拉更改时提交表单以保存数据 ..

【参考方案1】：

只需使用 ajax ：

    $('#form').on('change','select[name="state"]', function() 
    var province = $('select[name=state]').val();
    $.ajax(
        url: './get_city.php',
        method: 'post',
        data: "state": state,
        success: function (data) 
            $('select[name=city]').html(data);
        
    )
);

并在 get_city.php 中连接到 db ，获取城市并在标签上返回它们

【参考方案2】：

$('#state_field_id').click(function() var state=document.getElementById('state_field_name').options[document.getElementById('state_field_name').selectedIndex].text; );

您将获得选定的值