Question

我试图在选项中加入，如果用户选择/点击Other please specify选项，他会选择提供输入。这样输入的字符将立即在下拉栏中显示相关的国籍。对于基于javascript函数的解决方案，如何在我的html代码或下拉列表中调用该函数。谢谢！：d

＆＃13;

<div class="form-group">
<label for="status" class="control-label col-xs-4">
    <p class="left">Nationality</p>
</label>

<select name="status" required>
    <option></option>
    <option value="" disabled selected>Filipino</option>
    <option value='Filipino'>Filipino</option>
    <option value='American'>American</option>
    <option value='Japanese'>Japanese</option>
    <option value='French'>French</option>
    <option value='Sweden'>Sweden</option>
    <option value='other'>Others please specify.</option>
</select>
</div>

＆＃13;

Answer 1

检查以下代码

var code = $('#code'); //input field
code.hide(); //initially hide

$("#status").on('change', function() {
  var selected_option = $('#status option:selected').eq(0);
  if (selected_option.val() == 'other') {
    code.show();
    code.val(''); //empty the field every-time selecting the option
    console.log(selected_option.val());
  } else {
    code.hide();
  }
  console.log(selected_option.val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label for="status" class="control-label col-xs-4">
    <p class="left">Nationality</p>
  </label>

  <select name="status" id="status" required>
    <option></option>
    <option value="" disabled selected>Filipino</option>
    <option value='Filipino'>Filipino</option>
    <option value='American'>American</option>
    <option value='Japanese'>Japanese</option>
    <option value='French'>French</option>
    <option value='Sweden'>Sweden</option>
    <option value='other'>Others please specify.</option>
  </select>

  <input type="text" name="code" id="code" />
</div>

以下是完整的实施

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Nationality</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>
<div class="form-group">
    <label for="status" class="control-label col-xs-4">
    <p class="left">Nationality</p>
    </label>
    <select name="status" id="status" required="required">
        <option></option>
        <option value="" disabled="disabled" selected="selected">Filipino</option>
        <option value='Filipino'>Filipino</option>
        <option value='American'>American</option>
        <option value='Japanese'>Japanese</option>
        <option value='French'>French</option>
        <option value='Sweden'>Sweden</option>
        <option value='other'>Others please specify.</option>
    </select>
    <input type="text" name="code" id="code">
</div>
<script>
var code = $('#code'); //input field
code.hide(); //initially hide

$("#status").on('change', function() {
  var selected_option = $('#status option:selected').eq(0);
  if (selected_option.val() == 'other') {
    code.show();
    code.val(''); //empty the field every-time selecting the option
    console.log(selected_option.val());
  } else {
    code.hide();
  }
  console.log(selected_option.val());
});
</script>
</body>
</html>

Answer 2

试试这个：

您需要为listener设置select并根据所选值执行操作。

＆＃13;

var inputLabel = $('#inputLabel');
var onOptionChange = function() {
  if (this.value == 'other') {
    inputLabel.fadeIn(100);
  } else {
    inputLabel.fadeOut(100);
  }
};
$('#status').on('change', onOptionChange);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-group">
  <label for="status" class="control-label col-xs-4">Nationality</label>
  <select name="status" id="status" required>
    <option value="" disabled selected>Select your Nationality</option>
    <option value='Filipino'>Filipino</option>
    <option value='American'>American</option>
    <option value='Japanese'>Japanese</option>
    <option value='French'>French</option>
    <option value='Sweden'>Sweden</option>
    <option value='other'>Others please specify.</option>
  </select>
  <label for="input" id="inputLabel" style="display: none">Other:
    <input type="text" id="input">
  </label>
</div>

＆＃13;

具有输入字段选项的下拉列表

2 个答案: