Добавить строку + выбрать текст для ввода

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

Вы должны изменить код 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); 
    }); 

}); 

Answer 2

Проверка на длину выбранного значения. Если его нет, то пропустите его.

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

Answer 3

Вы вызывая изменения() на странице загрузки, поэтому он использует пустое поле, но я подозреваю, что вы хотите, чтобы текст в поле, чтобы исчезнуть, когда это пустой выбор выбран в любом случае , так что просто добавить одну строку

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

Answer 4

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