Question

id = field0的输入字段是一个隐藏字段，但仍从select中获取值，但是当用户选择“ Other”时，将出现输入文本field0。

$(function() {
  $('#selectNo').val($('#selectNO option:selected').val());

  $('#selectNo').bind('change', function() {
    $('#field0').val($('#selectNo option:selected').text());
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="selectNo">
  <option value="" selected="selected">-- Please Select --</option>
  <option value="one">One</option>
  <option value="two">Two</option>
  <option value="three">Three</option>
  <option value="other">Other</option>
</select>

<input id="field0" value="" style="display:none;"/>

Answer 1

您可以首先使用ID为display: none的css的#field0属性来隐藏文本框。然后，在jQuery中，您可以使用if语句来检查是否已选择值为other的选项，如果已选中，则可以使用.show()方法显示文本框，否则，如果未选择other选项，则可以使用.hide()方法将其隐藏。

请参见以下示例：

$(function() {
  $otherField = $("#field0");
  $('#selectNo').on('change', function() {
    if(this.value === 'other') {
      $otherField.val("");
      $otherField.show();
    } else {
      $otherField.hide();
      $otherField.val(this.value);
    }
  });
});

#field0 {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="selectNo">
  <option value="" selected="selected">-- Please Select --</option>
  <option value="one">One</option>
  <option value="two">Two</option>
  <option value="three">Three</option>
  <option value="other">Other</option>
</select>

<input id="field0" value="" />

Answer 2

您可以在选择文本“其他”时添加show()和hide()。

$(function() {
  $('#selectNo').val($('#selectNO option:selected').val());
  $('#field0').hide();
  $('#selectNo').bind('change', function() {
    $('#field0').val($('#selectNo option:selected').text());
    if ($('#selectNo option:selected').text() == "Other")
      $('#field0').show();
    else $('#field0').hide();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="selectNo">
  <option value="" selected="selected">-- Please Select --</option>
  <option value="one">One</option>
  <option value="two">Two</option>
  <option value="three">Three</option>
  <option value="other">Other</option>
</select>

<input id="field0" value="" />

Answer 3

我对您的代码进行了一些重构。

很容易检查哪个值/文本具有所选选项，并根据该值隐藏/显示输入

const input = $('#field0');
$("#selectNo").on('change', function() {
  const selectedOptionText = $(this).find('option:selected').text();

  input.val(selectedOptionText);
  selectedOptionText === 'Other' ? input.show() : input.hide();
})

#field0 {
 display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="selectNo">
  <option value="" selected="selected">-- Please Select --</option>
  <option value="one">One</option>
  <option value="two">Two</option>
  <option value="three">Three</option>
  <option value="other">Other</option>
</select>

<input id="field0" value="" />

选择选择标记中的“其他”选项时显示隐藏字段

3 个答案: