Question

我想将此功能添加到我的表单中。当选择下拉菜单中的选项时，我希望它输入上面的文本字段以及相应的信息。例如：

<form name="form1" action="formhandler">

<input type="text" name="typecar">

<select name="BMWCars"> 
<option value="Sedan">Sedan</option> // when this option is chosen put string "5-series" in textfield above
<option value="Convertible">Convertible</option> // when this option is chosen put string "6-series" in textfield above
<option value="Truck">Truck</option> // when this option is chosen put string "X5" in textfield above
<option value="Coupe">Coupe</option> // when this option is chosen put string "3-series" in textfield above
<option value="Hatchback">Hatchback</option> // when this option is chosen put string "5-series GT" in textfield above
</select>

</form>

如何在无需连接到获取字符串的情况下完成此操作？

Answer 1

如果您使HTML符合您的需要，代码会更整洁。

http://jsfiddle.net/TgM2W/3/

<form name="form1" id="form1" action="formhandler">
    <input type="text" name="typecar" id="typecar">
    <select name="BMWCars" id="BMWCars"> 
        <option value="">Select one...</option>
        <option value="5-series">Sedan</option>
        <option value="6-series">Convertibles</option>
        <option value="X5">Truck</option>
        <option value="3-series">Coupe</option> 
        <option value="5-series GT">Hatchback</option>
    </select>
</form>

JavaScript（不带jQuery）：

window.onload = function() {
    document.forms['form1'].elements['BMWCars'].onchange = function() {
        var opts = this.options;
        document.forms['form1'].elements['typecar'].value = opts[opts.selectedIndex].value;
    };
};

或使用jQuery：

$(document).ready(function() {
    $('#BMWCars').change(function() {
        var opts = $(this)[0].options;
        $('#typecar').val(opts[opts.selectedIndex].value);
    });
});

但是，如果您无法更改HTML，只需使用一个对象来存储值并引用：

objBMW = {
    "Sedan":"5-series",
    "Convertible":"6-series",
    "Truck":"X5",
    "Coupe":"3-series",
    "Hatchback":"5-series GT"
};

window.onload = function() {
    document.forms['form1'].elements['BMWCars'].onchange = changer;
};

function changer() {
    var opts = this.options;
    document.forms['form1'].elements['typecar'].value =objBMW[opts[opts.selectedIndex].value];
};

Answer 2

一月这就是你要做的事情：

为HTML中的所有引用项添加标识符。
编写一个小的Javascript代码来检测下拉列表中的更改并按字母顺序更新文本字段。



<form name="form1" action="formhandler">

<input type="text" name="typecar" id="typecar" />

<select name="BMWCars" id="dropdown"> 
<option value="5-series">Sedan</option>
<option value="6-series">Convertible</option>
<option value="X5">Truck</option>
<option value="3-series">Coupe</option>
<option value="5-series GT">Hatchback</option>
</select>

</form>

<script type="text/javascript">
var dropdown = document.getElementById( 'dropdown' );
dropdown.onchange = function() {
    document.getElementById( 'typecar' ).value = dropdown.value;
};
</script>

<form name="form1" action="formhandler"> <input type="text" name="typecar" id="typecar" /> <select name="BMWCars" id="dropdown"> <option value="5-series">Sedan</option> <option value="6-series">Convertible</option> <option value="X5">Truck</option> <option value="3-series">Coupe</option> <option value="5-series GT">Hatchback</option> </select> </form> <script type="text/javascript"> var dropdown = document.getElementById( 'dropdown' ); dropdown.onchange = function() { document.getElementById( 'typecar' ).value = dropdown.value; }; </script>

Answer 3

你想要用jQuery（或javascript）来做。

$("option").change(function() {
     var value;  

    //Do some logic to get the value you want to put in the textbox

    $("input[name='typecar']").val(value);
});

根据您网站的复杂程度，您可以通过几种不同的方式获取要放入文本框的值。如果它只是那5个选项，我会建议一个转换...案例。像这样：

$("option".change(function() {
    var value;

    switch($(this).val()) {
          case "Sedan":
               value = "5-series";
               break;

          case "Convertible":
               value = "6-series";
               break;

          case "Truck":
               value = "X5";
               break;

          case "Coupe":
               value = "3-series";
               break;

          case "Hatchback":
               value = "5-series GT";
               break;
     }

    $("input[name='typecar']").val(value);

});

Answer 4

 $('select').change(function() {
     var value = $(this).val();
        $("#typecar").val(value);
});

应该这样做。但是，首先在输入字段中添加typecar的ID。

如何根据我在下拉菜单中选择的内容在字段中获取不同的信息？

4 个答案: