添加字符串+选择要输入的文本

场景：用户从下拉列表中选择一个城市。从该选择中，输入文本输入字段然后填充字符串+城市.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>

来源

2015-02-24 Sal B

您需要更改的jQuery这样的代码：

$(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()它导致触发绑定完成后的更改权限。

时所选择的选项是空白的代码版本：

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

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

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

    prodInterest.val(str); 
    }); 

});

来源

2015-02-24 21:00:11 AlexL

谢谢。够简单！像魅力一样工作。 – 2015-02-24 21:02:39

当用户选择空白字段时会发生什么？ – Popnoodles 2015-02-24 21:04:28

请参阅空白版本的编辑答案 – AlexL 2015-02-24 21:08:20

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

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

来源

2015-02-24 21:00:57 epascarello

你触发页面负载变化（），所以它的使用领域的空白，但我怀疑你想在字段中的文本消失时，无论如何选择了空白选择，所以只需添加这一条线

eventChoice.change(function(){ 
    if ($('#test option:selected').text() == '') return;

来源

2015-02-24 21:01:18 Popnoodles

$(document).ready(function(){ 
     $("#test").change(function(){ 
      if($("#test :selected").text().length != 0) { 
      var str1 = "Channel & TR Event Reg - " + $("#test :selected").text(); 
      $("#productInterest").val(str1); 
      } 
      else { 
      $("#productInterest").val(''); 
      } 
    }); 
});

，而我忙于其他的答案有3个回答这个问题。任何方式我尝试，所以我上传代码。如果您选择默认版本，则会从#productInterest文本框中删除文字。

来源

2015-02-24 21:41:45 Shridhar

添加字符串+选择要输入的文本

回答

相关问题