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

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

<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>

---

如何在连接到或不连接到获取字符串的情况下实现这一点？

您需要在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);

});

---

您将希望在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);

});

---

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

或者使用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];
};

---

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

或者使用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];
};

---

简。这就是你必须做的：

向HTML中的所有引用项添加标识符。 编写一个小Javascript代码来检测下拉列表中的更改，并相应地更新文本字段。

---

简。这就是你必须做的：

向HTML中的所有引用项添加标识符。 编写一个小Javascript代码来检测下拉列表中的更改，并相应地更新文本字段。 我应该这样做。但是，首先在输入字段中添加typecar的ID

---

---

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

您希望文本字段包含所选选项的值还是其文本？显然，它们在您的案例中是相同的，但通常是不同的数据。mblase，他在每次说出他想要的值后都会有注释。您希望文本字段包含所选选项的值还是其文本？显然，在您的案例中，它们是相同的，但一般来说，它们是不同的数据。mblase，他在每次说出他想要的值之后都会有评论。他完全没有理由必须在jQuery中这样做。这一点很好。然而，在jQuery中更容易做到这一点。他将jQuery作为标记。不过，我会编辑我的帖子：根本没有理由让他在jQuery中这么做。这一点很好。然而，在jQuery中更容易做到这一点。他将jQuery作为标记。不过，我会编辑我的帖子：@mblase75+1。我在没有jQuery的情况下测试了第1个版本，但是我没有看到文本字段像使用jQuery一样被更新。是因为我把javascript放在了文档的de头中吗？@jan:是的，它应该作为一个函数添加到window.onload中。我将更新我的代码。@mblase75是的，它现在可以工作了。我是javascript新手，也听说过很多关于jquery的事情。与普通javascript相比，我选择jquery有什么好处吗？我需要用jquery实现什么呢？@jan:jquery在对网页进行复杂更改、使用AJAX加载外部数据时，特别是在制作任何动画时，都能节省大量时间。然而，如果您只是基于其他表单元素修改表单元素，jQuery并不能改善很多事情。jQuery是JavaScript，但它是一种完全不同的思考JavaScript的方式，我强烈建议首先对纯JavaScript有一个坚实的理解。@mblase75为什么带有对象的解决方案会给出一个未定义的消息？@mblase75+1用于所有工作。我在没有jQuery的情况下测试了第1个版本，但是我没有看到文本字段像使用jQuery一样被更新。是因为我把javascript放在了文档的de头中吗？@jan:是的，它应该作为一个函数添加到window.onload中。我将更新我的代码。@mblase75是的，它现在可以工作了。我是javascript新手，也听说过很多关于jquery的事情。与普通javascript相比，我选择jquery有什么好处吗？我需要用jquery实现什么呢？@jan:jquery在对网页进行复杂更改、使用AJAX加载外部数据时，特别是在制作任何动画时，都能节省大量时间。然而，如果您只是基于其他表单元素修改表单元素，jQuery并不能改善很多事情。jQuery是JavaScript，但它是一种完全不同的思考JavaScript的方式，我强烈建议首先对纯JavaScript有一个坚实的理解。@mblase75为什么带有对象的解决方案会给出一个未定义的消息？+1对于您的输入，我已经测试过了，它可以工作！我在想，我怎样才能在上面做同样的事情，但是，使用存储为变量的单独数据。不是作为：而是作为'var option3series='3series'，因为我希望dropdownlist仍然存储cartype:tr

---

uck，轿车，双门轿车等在数据库中？+1为您的输入，我已经测试过它，它的工作！我在想，我怎样才能在上面做同样的事情，但是，使用作为变量存储的单独数据。不是作为：而是作为'var option3series='3series'，因为我希望dropdownlist在数据库中继续存储cartype:truck、sedan、coupe等？