Question

我一直在努力寻找基于3个独立下拉选择器的值来填充文本框的方法。

这是HTML

<select name="dateofbirth_day" id="dateofbirth_day_field">
    <option value=""></option>
    <option value="01">01</option>
    <option value="02">02</option>
</select>  
<select name="dateofbirth_month" id="dateofbirth_month_field">
    <option value=""></option>
    <option value="January">January</option>
    <option value="February">February</option>
</select>
<select name="dateofbirth_year" id="dateofbirth_month_year">
    <option value=""></option>
    <option value="1980">1980</option>
    <option value="1981">1981</option>
</select>
<br><br>
<input type="text" id="text_field" value="">

我需要将上面3个下拉菜单中的3个值组合在文本字段中显示为01.January.1980

我使用下面的代码根据下拉列表的值填充文本字段，但这只适用于1个值：

$('#dateofbirth_day_field').change(function() {
              $('#text_field').val($('#dateofbirth_day_field option:selected').val());
         });

关于如何使用选择器的3个不同值实现组合文本的任何想法？

Answer 1

您希望将change事件绑定到所有<select>，并在其中任何一个更改时连接每个事件的值：

var $textfield = $("#text_field");
var $month = $("#dateofbirth_month_field");
var $day = $("#dateofbirth_day_field");
var $year = $("#dateofbirth_month_year");

$('select').change(function() {
    var val = $day.val() + "." + $month.val() + "." + $year.val();
    $textfield.val(val);
});

和jsfiddle example。

Answer 2

试试这个。如果有效

  $('#dateofbirth_day_field').change(function() {
      $('#text_field').append($('#dateofbirth_day_field option:selected').val());
   });

Answer 3

   function showSelected()
    {
        debugger;
        var day = $("#dropdown").val();
        var month = $("#dropdown1").val();
        var year = $("#dropdown2").val();
            debugger;
            var s = day+ "." + month + "." + year;
            alert(s);
            $("#txtn").val(s);

    }

</script>

<div>
 <select id="dropdown" onchange="showSelected(this)">
     <option>1</option>
     <option>2</option>
     <option>3</option>
     <option>4</option>
 </select>
      <select id="dropdown1" onchange="showSelected(this)">
     <option>11</option>
     <option>12</option>
     <option>10</option>
     <option>9</option>
 </select>
      <select id="dropdown2" onchange="showSelected(this)">
     <option>2001</option>
     <option>2002</option>
     <option>2003</option>
     <option>2004</option>
 </select>
     <input type="text" id="txtn" value="" />

Answer 4

您需要将这些字段附加到文本框

日间变更

  $('#dateofbirth_day_field').change(function() {
                  $('#text_field').val($('#dateofbirth_day_field option:selected').val());
             });

月份更改

$('#dateofbirth_month_field').change(function() {
                      $('#text_field').val("."+$('#dateofbirth_month option:selected').val());
                 });

年度变化

$('#dateofbirth_year_field').change(function() {
                      $('#text_field').val("."+$('#dateofbirth_year_field option:selected').val());
                 });

Javascript根据多个下拉值将文本添加到字段

4 个答案: