在选择下拉列表的第一个选项时，它不应显示在下拉列表中答案

【问题标题】：On selecting first option of dropdown it should not dispaly in dropdown在选择下拉列表的第一个选项时，它不应显示在下拉列表中
【发布时间】：2017-07-30 13:52:42
【问题描述】：

当我选择下拉列表的第一个选项时，它不应该显示在下拉选择中。

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

当我选择添加新时，它不应该显示在下拉列表中，但它应该在选择它时打开模式。

【问题讨论】：

我认为添加选定的禁用隐藏很简单，请检查我的答案

标签： jquery html css twitter-bootstrap-3

【解决方案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>

【讨论】：

完美，谢谢
有 1 个问题，它在这里工作完美，但在我的代码中不起作用，它显示在我的代码中添加新并且控制台中没有错误
你是否用 $(document).ready(function() {}) 包装了 jQuery 代码？
是的，我做了，但它不起作用 $(document).ready(function() { $('#purchaseorderto').change(function(event) { $modal = $('#poorderto '); if ($("#purchaseorderto option:selected").val() == "addnewpoto") { $('#purchaseorderto').prop('selectedIndex', 0); $modal.modal('show '); } }); });
你能添加链接到你的项目吗？

【解决方案2】：

您可以在 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>

试试这个例子

【讨论】：

我认为添加selected disabled hidden 很简单

【解决方案3】：

检查此代码 sn-p 出来。这是你要求的吗？

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>

【讨论】：

No no no open modal on selection of Add new, 但是当我选择 Add new 它不应该在下拉列表中显示，它应该是空白的选择它
@JonPan 立即查看