jQuery-如果不存在val，则阻止Select Value替换文本

Question

我有一个选择，第一个选项通常是"Please select blah，blah，blah"，没有值，所以当我使用下面的代码进行检查时，我会得到第一个选项的值"Please selection an option"。如何防止这种情况发生？

参见此处的示例，https://jsfiddle.net/nvcc84st/

代码

<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

如果用户选择了第一个选项，请尝试在第一个选项和您可以控制的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

您也可以使用这个：

<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 切换未选中选项

小提琴

$('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)