Question

我有这个HTML代码，

<select name="sup" class='form-control' required >
    <option value="1">Value 1</option>
</select>

是否可以使用JQuery在下拉列表中显示不在选项中的文本？

更多解释，

我只选择值为1，名称为＆＃34;值1＆＃34;。我想显示＆＃34;价值2＆＃34;值为2。但是，如果我单击下拉箭头，它将只显示一个选项，＆＃34;值1＆＃34;。

有可能吗？

Answer 1

没有。下拉列表未打开时显示的内容必须是选项选项中的选项之一。要做其他事情，你必须开始玩选择之上的重叠事物，以及随之而来的所有跨浏览器的痛苦。

Answer 2

也许这个占位符代码可以帮助你，它会在select中显示为默认值，但不会被选中，并且用户将被html验证强制选择另一个选项（如果你使用HTML验证）。如果您不使用HTML（或其他）验证，因为该选项已被停用，即使它具有值，也不会随表单一起发送。

＆＃34;其他＆＃34;选项将触发新输入以获得自定义响应。

＆＃13;

//Detects the change of value of the select element.
$("select[name='sup']").change(function() {
	//Checks if the current value of the elemnent is "other"
  if ($(this).val() == "other") {
		//If so, the other input is shown
    $("input[name='other-input']").show();
  } else {
		//else, the input is cleaned and hidden
    $("input[name='other-input']").val("");
    $("input[name='other-input']").hide();
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="sup" class='form-control' required>
<option value="" selected disabled>Placeholder Text</option>
  <option value="1">Value 1</option>
  <option value="2">Value 2</option>
  <option value="3">Value 3</option>
  <option value="other">Other</option>
</select>
<input style="display: none; width: 300px;" type="text" name="other-input" placeholder="Type here your custom response">

＆＃13;

使用jquery选择不在选项中的文本

2 个答案: