Question

我当前的选择框如下所示：

<select id="select_cat">
<option value="1">Sports</option>
<option value="2">T shirt</option>
<option value="3">Jeans</option>
</select>

我从mysql php中获取其中一个选项并通过json发送它，我想将结果放在选择框的顶部。

例如：如果mysql返回“T恤”，其值为“2”，我希望我更新的选择框如下所示：

<select id="select_cat">
<option value="2">T shirt</option>
<option value="1">Sports</option>
<option value="3">Jeans</option>
</select>

到目前为止我尝试了什么：

success : function(r){

var obj = JSON.parse(r);

$("#select_cat > :first-child").attr(obj.name, obj.value);

}

控制台错误：未捕获InvalidCharacterError：无法在“元素”上执行'setAttribute'：'t shirt'不是有效的属性名称。

这是我能做的最好的事情，因为我是一个菜鸟。干杯！

Answer 1

您使用代码执行的操作是将名称为obj.name的属性设置为值obj.value。您可能要做的是将value设置为obj.value，将文本设置为obj.name：

success : function(r){
    var obj = JSON.parse(r);
    $("#select_cat > :first-child").val($.trim(obj.value)).html(obj.name);
}

此处，$.trim删除实际值周围的所有空格。

Answer 2

尝试这种方式：

success: function(r){

    var obj = JSON.parse(r);

    $("#select_cat option[value="+obj.value+"]").remove(); //remove the existing element
    $("#select_cat").prepend('<option value="'+ obj.value +'">'+ obj.name +'</option>'); //add the element as first child

}

Answer 3

我相信这就是你想要的。您实际上并不想像您尝试那样更改选项的属性。这只是一个演示，但应该很容易转换为您的需求。我所拥有的.insertBefore()函数是将所选值（在本例中为硬编码为2）移动到顶部。

$(function() {
  var value = 2
  $("#select_cat > [value=" + value + "]").insertBefore("#select_cat > :first-child");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select_cat">
  <option value="1">Sports</option>
  <option value="2">T shirt</option>
  <option value="3">Jeans</option>
</select>

我的猜测是你的功能看起来像这样：

success : function(r){
   var obj = JSON.parse(r);
   $("#select_cat > [value=" + obj.value + "]").insertBefore("#select_cat > :first-child");
}

从jquery ajax json响应中选择选择框中的选项值

3 个答案: