Question

我有一个选择，第一个选项通常是“请选择等等，等等，等等”，并且没有任何价值所以当我使用下面的代码进行检查时，我得到的值为“请选择一个选项”第一种选择。我该如何防止这种情况？

CODE

<select>
  <option>Please select an option</option>
  <option value="one">Option One</option>
  <option value="two">Option Two</option>
  <option value="three">Option Three</option>
</select>

$('select').on('change', function(){
  if ( $(this).val ) {
    // do something
  }
});

Answer 1

我不相信你可以阻止这个值转到你的JQuery代码。但是你可以测试它并丢弃。

$('select').on('change' function() {
    if ($(this).val() == "Please select an option") {
        // do nothing
    } else {
        // do something
    }
});

或者

$('select').on('change' function() {
    if ($(this).val() != "Please select an option") {
        // do something
    }
});

Answer 2

尝试在第一个选项中保留value =“”，如果用户选择了第一个选项，则可以在JavaScript代码中控制

<select>
 <option value="">Please select an option</option>
 <option value="one">Option One</option>
 <option value="two">Option Two</option>
 <option value="three">Option Three</option>
</select>
<br>
<p>The selected value is <span>???</span></p>

<script>
$('select').on('change', function(){
    var selectVal = $(this).val();
    if($(this).val() == ""){
        selectVal = "You must select an option";
    }
    console.log('selectVal = ' + selectVal);
    $('span').text(selectVal);
});
</script>

Answer 3

您还可以使用this：

<select>
<option value="0">Please select an option</option>
<option value="1">Option One</option>
<option value="2">Option Two</option>
<option value="3">Option Three</option>
</select>

<br>

<p>The selected value is <span>???</span></p>

$('select').on('change', function(){
var selectVal = $(this).val();
if(!parseInt(selectVal))
    {
  selectVal = "";
  }
  console.log('selectVal = ' + selectVal);
    $('span').text(selectVal);
});

Answer 4

以下是使用.find() :selected :not() :contains()的示例使用Please select an option

取消选择的选项

fiddle

$('select').on('change', function(){
var selectVal = $(this).find("option:selected:not(:contains('Please select an option'))").attr('value');
if(!selectVal)return console.log("not allowed");
  console.log('selectVal = ' + selectVal);
    $('span').text(selectVal);
});

Answer 5

禁用first-child选项的另一种解决方案

注意：如果您想将选项设置为占位符并且在选择后仍然可用，则不建议使用。

请参阅Fiddle

$("select option:first-child").attr("disabled",true);

或根据需要禁用选项:contains。

$("select option:contains('Please select an option')").attr("disabled",true)

还禁用value="SPECIFIC_VALUE"

选项

$("select option[value='SPECIFIC_VALUE']").attr("disabled",true)

jQuery - 如果没有val，则阻止选择值替换文本

5 个答案: