使用 jquery 找到一个与选择数据状态具有相同值的选择选项并将选项加载为“已选择”答案

【问题标题】：find a select option with same value as select data-status and load option as "selected" with jquery使用 jquery 找到一个与选择数据状态具有相同值的选择选项并将选项加载为“已选择”
【发布时间】：2017-02-14 00:18:04
【问题描述】：

我正在将 2 个单独的 ajax 响应加载到选择下拉列表中，并且选择下拉列表将具有数据状态，我希望实现的是遍历选项并找到与选择数据具有相同值的选项-status 并将其加载为“已选择”。

鉴于我的 ajax 调用生成的 html 代码：

<select class="orderCurrentStatus" data-status="1215458">
  <option value="608653">Goods Received</option>
  <option value="608654">Purchase - Awaiting Payment</option>
  <option value="608655">Purchase - Payment Received</option>
  <option value="766705">EXCHANGE FEE PAID</option>
  <option value="838627">Order Refunded</option>
  <option value="1215458">Goods Dispatched</option>
  <option value="2322397">Paid - Custom Order Under Production</option>
  <option value="2384172">WRONG/INCOMPLETE ADDRESS!</option>
  <option value="2544576">Paid - Awaiting Pre-Ordered Items</option>
</select>

我的尝试：

var order_status = $(".orderCurrentStatus").data("status");
var options = $(".orderCurrentStatus option");

if (options.val(order_status)) {
  $(this).attr("selected");
}

我就是无法让它工作。

【问题讨论】：

$(this).attr('selected','');
您不能只将属性设置为“已选择”而不设置值。刚刚在我的网站上试了一下，还是不行。您必须设置一个值，即使它绝对没有（我上面评论中的示例）。默认情况下，如果您没有在第二对单引号中添加任何内容，则会将其设置为选中（我猜这是您想要的）。

标签： javascript jquery ajax

【解决方案1】：

您可以只使用属性选择器[value="'+ order_status +'"] 来选择值等于变量order_status 的option 元素。

从那里，将selected 属性值设置为true 或selected。

$('.orderCurrentStatus option[value="'+ order_status +'"]').prop('selected', true);

您的初始代码存在一些问题。

变量this 引用全局对象，在本例中为window 对象，因为没有功能范围。
如果在使用.attr() 方法时未指定值，则返回selected 属性值。您需要指定第二个参数才能设置selected 属性的值。指定 true 或 selected 将适用于您的情况。但是，.prop() 方法更适合这种情况，因为您应该设置属性。

此外，如果您想对所有 select 元素执行此操作，则可以遍历它们，然后检索 data-status 属性值，并设置相应的 option 元素的 selected 属性：

$('select').each(function () {
  var status = $(this).data("status");
  $(this).find('option[value="'+ status +'"]').prop('selected', true);
});

【讨论】：

那个，或者你知道，你可以直接说“选中”。
感谢解决它的工作真的很有效只是花了很长时间才意识到在填充选择下拉列表中的选项的 Ajax 请求之后我必须得到这个调用谢谢大声笑

【解决方案2】：

您应该以某种方式检查具有指定值的选项是否存在！您实际尝试的是为每个选项元素分配一个值。

这应该是简单的解决方案：

var order_status = $(".orderCurrentStatus").data("status");

if( $('.orderCurrentStatus option[value=' + order_status + ']').length )
    $('.orderCurrentStatus option[value=' + order_status + ']').attr('selected','selected');

您可以在 JSFiddle 上验证代码： https://jsfiddle.net/cwma9h5m/

【讨论】：

【解决方案3】：

您始终可以遍历选项值以匹配数据状态值。

var status = $('.orderCurrentStatus').data("status");
 $('.orderCurrentStatus option').each(function(){
    if( $(this).val()==status){
     $(this).prop('selected', true);
    }
 });

【讨论】：