如何根据在另一个 <select> 中选择的 <option> 来更改 <select> 的 name 属性？

Question

我正在制作一个品牌/模型表单，其中包含两个下拉菜单。选择一个品牌后，将显示带有该品牌的适当模型列表的模型下拉列表，而其他品牌的其余下拉列表保持隐藏。我遇到的问题是将表单发布到文本文件。所有字段都发布得很好，除了模型字段，它总是发布在最后一个下拉列表中选择的选项，这恰好是沃尔沃模型的列表。我需要在模型的活动列表中将 name="" 属性更改为 "car_model"。

这是我拥有的代码的一个简短示例：

<tr>
    <td width="15%" class="label">Make:</td>
    <td class="inputd"><select id="makes" name="car_make" class="input">
        <option value="Default">Please Select</option>
        <option value="Acura">Acura</option>
        <option value="Audi">Audi</option>
        <option value="BMW">BMW</option>
    </select>
    </td>
</tr>
<tr>
    <td width="15%" class="label">Model:</td>
    <td class="inputd"><div id="car_models">
        <div id="Default" style="display:block">
          <select name="car_model">
            <option value="0">Please Select</option>
            <option value="1">Choose Make First</option>
          </select>
        </div>
        <div id="Acura" style="display: none;">
          <select name="car_model">
            <option value="0">Please Select</option>
            <option value="CL">CL</option>
            <option value="Integra">Integra</option>
            <option value="Legend">Legend</option>
          </select>
        </div>
        <div id="Audi" style="display: none;">
          <select name="car_model">
            <option value="0">Please Select</option>
            <option value="A3">A3</option>
            <option value="A4">A4</option>
            <option value="A5">A5</option>
          </select>
        </div>
        <div id="BMW" style="display: none;">
          <select name="car_model">
            <option value="0">Please Select</option>
            <option value="1 Series">1 Series</option>
            <option value="3 Series">3 Series</option>
            <option value="5 Series">5 Series</option>
          </select>
        </div>
    </td>
</tr>

这是我用来显示/隐藏 div 的 javascript：

<script>
$(function () {
    $('#makes').change(function () {
        $('#car_models > div').hide();
        $('#car_models').find('#' + $(this).val()).show();
    });
});
</script> 

我有一个 php 表单写入文件，它从名为“car_model”的下拉列表中写入值，所以我需要找到一种方法在它处于活动状态时将其更改为唯一名称。

谢谢。

这是我用来写入 txt 文件的代码：

<?php
$first_name = $_POST['first_name'];
$last_name = $_POST['last_name'];
$phone = $_POST['phone'];
$email = $_POST['email'];
$zip = $_POST['zip'];
$year = $_POST['car_year'];
$make = $_POST['car_make'];
$model = $_POST['car_model'];
$mileage = $_POST['car_mileage'];
$data = "$first_name, $last_name, $phone, $email, $zip, $year, $make, $model, $mileage
\n";
$fh = fopen("data.txt", "a");
fwrite($fh, $data);
fclose($fh);
print "Thanks";
?>

Answer 1

您当前代码的问题是您的所有选择列表都具有相同的名称，并且它们都与表单一起提交，即使它们不可见。由于提交了多个具有相同名称的变量，因此最后一个总是获胜。

要解决此问题，请禁用 <select> 元素并隐藏其容器：

$('#makes').change(function () {
    $('#car_models > div').hide();
    $('#car_models select').prop('disabled', true);
    $('#car_models').find('#' + $(this).val()).show()
                    .find('select').prop('disabled', false);
});