选择<选项>更改前不可见的文本

Question

我遇到了一个带有<select> <option>元素的奇怪的视觉问题。我有一个函数，每次从<option>下拉列表中选择特定的<select>时都会运行，此代码然后设置要选择的select元素的选项之一，这是通过以下方式发生的：

$('select[name="data[ApplicationPayday][EmpIndustry]"]').find('option[value=""]').attr('selected', true)

获得选定值的选择是：

<select class="custom-select" id="EmpIndustry" name="data[ApplicationPayday][EmpIndustry]" aria-describedby="EmployerIndustryHelp" required>
  <option value="" selected>Please Select</option>
  <option value="10">Health</option>
  <option value="22">Retail</option>
</select>

但是，尽管菜单中有有效的选项，所选内容的文本还是不可见的。

知道为什么吗？

再现网址：https://codepen.io/sts-ryan-holton/pen/LKJbzL

Answer 1

使用以下代码。

$('select[name="data[ApplicationPayday][EmpIndustry]"]').find('option[value=""]').prop('selected', true);

Answer 2

问题出在哪里：

$('select[name="data[ApplicationPayday][EmpIndustry]"]').val(25)

在不同行业之间移动时，会将所选值重置为“ 25”。但“请选择”的值为“”（空字符串）。在您的小提琴中，我将该行更改为：

$('select[name="data[ApplicationPayday][EmpIndustry]"]').val("")

现在，当我切换时，它会正确显示“请选择”。

Answer 3

您可以使用以下任何代码

1. $（'select [name =“ data [ApplicationPayday] [EmpIndustry]”]'）。find（'option [value =“”]'）。prop（'selected'，true）;

2. $（'select [name =“ data [ApplicationPayday] [EmpIndustry]”] option [value =“”]'）。prop（'selected'，true）;

3. $（'select [name =“ data [ApplicationPayday] [EmpIndustry]”]'）。val（''）;

由于select选项具有id且id属性为HTML元素指定了唯一ID，因此上述代码可以写为...。

1. $（'＃EmpIndustry'）。find（'option [value =“”]'）。prop（'selected'，true）;

2. $（'＃EmpIndustry option [value =“”]'）。prop（'selected'，true）;

3. $（'＃EmpIndustry'）。val（''）; （代码与ravibagul91相同）