Javascript jQuery：从多个字段中获取值并显示在文本字段中

我有6个不同的选择框和一个文本字段，我需要从中获取值，并使用jQuery将其合并到一个文本字段中

我基本上理解我将使用如下字符串为targetTextField构建值：$'targetTextField'.valopt1+opt2+opt3+opt4+opt5+opt6+textField

如何获取SelectOptions 1的值并将其转换为opt1

它是否符合opt1=$'selectoptions1'.val；还是我的方向完全错了

我在以下位置创建了一个基本的JSFIDLE，其中只有两个选项：

jQuery

$(function() {
    $("#options").change(function(){
    var opt1 = $('select#options').val()
    }$('#targetTextField').val(opt1+opt2);
});
    $("#options2").change(function(){
    var opt2 = $('select#options2').val()
    }$('#targetTextField').val(opt1+opt2);
});
});​

HTML

---

…但它似乎不起作用，所以我显然误解或遗漏了一些内容。

要查看下拉列表，请尝试以下内容

 $('select option:selected').text() 

看一看，它应该有希望给你一个指针，在你需要做什么。

---

您可以将名称更改为类，然后只提供要在输入中显示的格式。但是从你的问题来看，我认为应该是关于这个的。

我为你做了这个演示，希望它能帮助你

---

如果选择框的id不同

  var toalopt=$('select option1:selected').text();
    toalopt+=$('select option2:selected').text();
    toalopt+=$('select option3:selected').text();
    toalopt+=$('select option4:selected').text();
    toalopt+=$('select option5:selected').text();
    toalopt+=$('select option6:selected').text();

    document.getElementById('id where you want to club data').innerHTML=toalopt;

如果你有相同的身份证

   $(document).ready(function(){
    $('#optionvalue).click(function(){
        var values ='';
        $('select[name="sameid"]').each(function(index,item){
            values +=$(item).val() +' ';
        });
            $('id where you want to club data').val(values);
    });

});

---

HTml将是id为的普通select标记。

首先，为每个select元素添加一个类，以便更好地将它们标识为一个组：

<select id="options" class="auto-updater">
  <option value="" selected>Choose...</option>
  <option value="opt1Value1" >Option 1</option>
  <option value="opt1Value2" >Option 2</option>
</select>

<select id="options2" class="auto-updater">
  <option value="" selected>Choose...</option>
  <option value="opt2Value1" >Option 1</option>
  <option value="opt2Value2" >Option 2</option>
</select>

<input type="text" id="targetTextField" name="targetTextField" size="31" tabindex="0" maxlength="99">

---

您可以看到，我将此设置为忽略保留默认值的select元素。如果您取消注释，则其下方的行将包括所有选择，无论选择的值如何。

您需要的最小代码如下：

$(function() {
       $("select").change(function(){
          var opts=$('option:selected').val();
          var oldVal=$('#targetTextField').val();
             $('#targetTextField').val(oldVal+opts);  
    });   
});​

---

找到JSFIDLE演示。

您的问题已经有了答案：您有一个带有六个选项的选择框还是性别选择框？6个单独的选择框和一个文本field@RoryMcCrossan你能检查一下我添加的代码吗？你说我有答案，但有些东西连接不正确。比如说用户选择选项1和选项2从这两个选项中选择。那么，你希望答案是12吗？谢谢，太好了。如果我要添加选项3，我会添加tmp+=$options3.val；在tmp+=$options2.val；之后；？另外，我应该添加什么来获取文本字段的值，比如ID选项3？是的，这是正确的，只需添加另一个tmp+=$options2.val；。它也适用于textfield。只需使用val函数-我更新了演示。但是，文本字段上的更改方法在失去焦点后触发。

<select id="options" class="auto-updater">
  <option value="" selected>Choose...</option>
  <option value="opt1Value1" >Option 1</option>
  <option value="opt1Value2" >Option 2</option>
</select>

<select id="options2" class="auto-updater">
  <option value="" selected>Choose...</option>
  <option value="opt2Value1" >Option 1</option>
  <option value="opt2Value2" >Option 2</option>
</select>

<input type="text" id="targetTextField" name="targetTextField" size="31" tabindex="0" maxlength="99">

$(".auto-updater").change(function() {
    var values = $(".auto-updater").map(function() {
        return ($(this).val() == "") ? null : $(this).val(); // ignore default option select
        // return $(this).val(); // include all values
    }).get();

    $("#targetTextField").val(values.join(','));
});

$(function() {
       $("select").change(function(){
          var opts=$('option:selected').val();
          var oldVal=$('#targetTextField').val();
             $('#targetTextField').val(oldVal+opts);  
    });   
});​