javascript - 添加字符串+选择文本输入

Question

场景:用户从下拉列表中选择一个城市。从该选择中，输入文本输入字段然后填充一个字符串 + 该城市 .text()

问题:根据我所拥有的(如下)，当附加选项的文本时，字符串会自动填充。

我希望输入文本字段默认为空白，只有当用户选择城市时，它才会添加文本字符串 + 选项文本。

感谢您的关注和建议!

演示:http://codepen.io/salbaldovinos/pen/QwrZbp

$(document).ready(function(){
  var eventChoice = $('#test'),
  prodInterest = $('#productInterest');

  eventChoice.change(function(){
    var str = "";

    $('#test option:selected').each(function(){
      str += "Channel & TR Event Reg - " + $(this).text();
    });

    prodInterest.val( str );
  }).change();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="">
<select name="" id="test">
    <option value="" selected></option>
    <option value="hongkong">Hong Kong</option>
    <option value="taipai">Taipai</option>
  </select>
  <input type="text" id="productInterest" />
</form>

Answer 1

检查所选值的长度。如果没有，则跳过它。

$(document).ready(function(){
  var eventChoice = $('#test'),
  prodInterest = $('#productInterest');

  eventChoice.change(function(){
    var str = "";

    $('#test option:selected').each(function(){
      if (this.value.length) {
          str += "Channel & TR Event Reg - " + $(this).text();
      }
    });

    prodInterest.val( str );
  }).change();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="">
<select name="" id="test">
    <option value="" selected></option>
    <option value="hongkong">Hong Kong</option>
    <option value="taipai">Taipai</option>
  </select>
  <input type="text" id="productInterest" />
</form>