使用jQuery選擇不在選項中的文本

Question

我有這個HTML代碼，

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

是否可以使用JQuery在選項之外的下拉列表中顯示文本？

更多說明，

我只能選擇值為“ Value 1”的值為1的選項。 我想顯示值為2的“值2”。但是，如果單擊下拉箭頭，它將僅顯示一個選項“值1”。

可能嗎？

Answer 1

不可以。下拉菜單未打開時顯示的內容必須是所選選項中的選項之一。 要執行其他操作，您必須開始將所選內容疊加在選擇之上，並伴隨所有跨瀏覽器的痛苦。

Answer 2

也許用於占位符的此代碼可以為您提供幫助，它將在選擇中顯示為默認值，但將是不可選擇的，並且html驗證將迫使用戶選擇其他選項（如果使用HTML驗證）。 如果您不使用HTML（或其他）驗證，則由於該選項被禁用，即使具有值，也不會與表單一起發送。

“其他”選項將觸發新輸入以具有自定義響應。

 //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(); } }); 

 <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">