在选择下拉菜单中的第一个选项时，它不应该在下拉菜单中显示

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>

尝试用这个例子