Question

我有两个表单元素。一个是通过getJSON调用动态填充的下拉列表。另一个是标准输入文本框。

加载表单后，将填充下拉列表。文本框“通常”会有一个值，因为这是一个批准表单。

我要做的是让我的下拉列表中的值与文本框中的值匹配为所选选项。这适用于此类型的其他下拉菜单，但在这种情况下，我认为我的下拉值和文本框值中的空格有问题。

在我遇到的问题中，我的文本框的值为“Big Red Barn”。（没有报价）我的下拉列表中的一个值也具有“Big Red Barn”的值。（没有引号）这应该是选定的。

形式：

<select name="cu_vendors" id="cu_vendors">
</select>

<input type="text" name="ven_name" id="ven_name" />

我的下拉列表填充得很好。

JQuery的：

$.getJSON("get-cu-vendors.html", function(data){
  $('#cu_vendors').html('');
  if(data && data.length > 0){
    $('#cu_vendors').append("<option value='' class='red'>Required</option>");
        $.each(data, function(key, value){
        $("#cu_vendors").append("<option value=\""+$.trim(value)+"\">"+value+"</option>");                  
    });         
  }else{
   $('#cu_vendors').html('');
  }
});
 $("#cu_vendors option[value="+ $('#ven_name').val() +"]").attr('selected', 'selected');

我收到语法错误，但不是错误：

Error: Syntax error, unrecognized expression: #cu_vendors option[value=Big Red Barn]

所以，我认为空间是问题所在。当我在上一行中使用$（'＃ven_name'）。val（）时，JQuery中是否有引用这些值的方法？

感谢您的帮助。

Answer 1

两件事..首先，设置所选选项的行需要在$.getJSON回调中，否则它将在ajax调用完成之前执行。其次，由于选择器中的值有空格，因此需要引用该值：

$.getJSON("get-cu-vendors.html", function (data) {
    $('#cu_vendors').html('');
    if (data && data.length > 0) {
        $('#cu_vendors').append("<option value='' class='red'>Required</option>");
        $.each(data, function (key, value) {
            $("#cu_vendors").append("<option value=\"" + $.trim(value) + "\">" + value + "</option>");
        });
        $("#cu_vendors option[value='" + $('#ven_name').val() + "']").attr('selected', 'selected');
    } else {
        $('#cu_vendors').html('');
    }    
});

您可以从错误消息中看到您的选择器如下所示：

#cu_vendors option[value=Big Red Barn]

当需要看起来像这样：

#cu_vendors option[value="Big Red Barn"]

Answer 2

 $("#cu_vendors option[value='"+ $('#ven_name').val() +"']")

应该做的伎俩。

空格没问题！

请注意'的使用：您想要“value ='带有空格的东西”而不是“value =具有空格的东西”。

另外，正如有人已经说过的那样，你可以从错误信息中看到它缺少简单的引号。

Answer 3

我认为你缺少选择器周围的引号：

$("#cu_vendors option[value='"+ $('#ven_name').val() +"']").attr('selected', 'selected');

JQuery如何引用动态字符串

3 个答案: