在選擇下拉菜單中的第一個選項時，它不應該在下拉菜單中顯示

Question

當我選擇第一個下拉選項時，它不應顯示在下拉菜單中。

<select id="purchaseorderto" data-placeholder="items Name" name="purchaseorderto" class="form-control chosen-select" required="required"> 
 
    <option selected></option> 
 
    <option value="addnewpoto" class="addnewtxt">Add new </option> 
 
    <option value="1"> Abc</option> 
 
    <option value="2"> Pqr </option> 
 
    <option value="3"> xyz</option> 
 
</select>

當我選擇添加新的，它不應該在下拉菜單中顯示，但它應該在它選擇開模式。

Answer 1

我希望這有助於

$('#purchaseorderto').change(function(event) { 
 

 
if($("#purchaseorderto option:selected").val() == "addnewpoto") 
 
{ 
 
$('#purchaseorderto').prop('selectedIndex',0); 
 
    alert("do something"); 
 
} 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="purchaseorderto" data-placeholder="items Name" name="purchaseorderto" class="form-control chosen-select" required="required"> 
 
    <option selected></option> 
 
    <option value="addnewpoto" class="addnewtxt">Add new </option> 
 
    <option value="1"> Abc</option> 
 
    <option value="2"> Pqr </option> 
 
    <option value="3"> xyz</option> 
 
</select>

Answer 2

查看此代碼段。這是你要求的嗎？

var prevVal; 
 
$('#purchaseorderto').click(function() { 
 
    prevVal = $(this).val(); 
 
}).change(function() { 
 
    if ($(this).val() === 'addnewpoto') { 
 
    $(this).val(prevVal); 
 
    alert('open model code here'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="purchaseorderto" data-placeholder="items Name" name="purchaseorderto" class="form-control chosen-select" required="required"> 
 
    <option value="addnewpoto" class="addnewtxt">Add new </option> 
 
    <option value="1"> Abc</option> 
 
    <option value="2"> Pqr </option> 
 
    <option value="3"> xyz</option> 
 
</select>

Answer 3

可以在HTML充分利用hidden屬性。

<select> 
<option selected disabled hidden>Add abc</option> 
<option value="1">One</option> 
<option value="2">Two</option> 
<option value="3">Three</option> 
<option value="4">Four</option> 
<option value="5">Five</option> 
</select> 

select{ 
 
margin: 40px; 
 
width: 50%; 
 
}

<select> 
 
    <option selected disabled hidden>Add abc</option> 
 
    <option value="1">One</option> 
 
    <option value="2">Two</option> 
 
    <option value="3">Three</option> 
 
    <option value="4">Four</option> 
 
    <option value="5">Five</option> 
 
</select>

嘗試用這個例子