在选择下拉菜单时创建文本字段

Create Text Field on Selection of Dropdown Menu

本文关键字：文本 字段 创建 选择 下拉菜单      更新时间：2023-09-26

我有一个简单的报价形式，我有一些问题，我希望从下拉菜单中选择特定字段时出现一个文本字段，我的代码如下：

<script type="text/javascript">
$(document).ready(function(){
          $("#hear").change(function(){       
             $("#quote").find(".field").remove(); 
             //or
               $('#quote').remove('.field');
          if( $(this).val()=="value5")
             {
        $("#quote").append("<input class='field' type='text' />");
             }
          });
});
</script>
<form id="quote" class="quote-form">
<input name="" class="text-field" type="text" placeholder="Full Name" />
<input name="" class="text-field" type="text" placeholder="Contact Number" />
<input name="" class="text-field" type="text" placeholder="E-Mail Address" />
<select id="hear" name="hear" class="select-field">
<option value="value1" selected="true" disabled="disabled">Where did you hear about us? (Please Select)</option>
  <option value="value2">Check-a-Trade</option>
  <option value="value3">MyBuilder</option>
  <option value="value4">Referred by a Friend (Please State)</option>
  <option value="value5">Other (Please State)</option>
</select>
<input name="" class="text-field" type="text" placeholder="Location" />
<textarea name="" cols="" rows="8" class="text-area" placeholder="Description of your Desired Works.."></textarea>
<input name="" type="submit" class="quote-form-button"/>

</form>

上面的代码应该在选择"其他"时创建一个文本字段，虽然我遇到了一些问题，但任何帮助都值得赞赏，干杯！

你没有提到详细的错误。但是，与其删除字段，不如隐藏的东西应该是更好的选择。尽管这可能会根据您的确切要求而有所不同。

在此示例中，当您选择"其他"时，将使用提供的索引创建一个文本框。在其他一些选择文本字段上被隐藏。

$(document).ready(function() {    
$('#hear').change(function() {
var val = $(this).find("option:selected").text();
if (val == "Other") {
$("#quote").append('<input type="text" name="textbox' + index + '" id="textbox' + index + '" value="">');
} 
if(val == "some value"){
$('#your text field id').hide();
}).change();
});
相关文章：