如何设置值并使用jquery在选择框中选择正确的选项

Question

我有以下代码用于填充选择框：

$(document).ready(function(){
    //populate site list.
    $.ajax({
              url:"<?php echo site_url('site/sitelist');?>",
              type:'POST',
              dataType:'json',
              success: function(res) {
            //loop through results
            var htmlstring = "<option value='' disabled selected>Select the Site</option>";
            for (var key in res) {
            if (res.hasOwnProperty(key)) {
                    //console.log(key + " -> " + res[key]['site_abbrev']);
                    htmlstring += "<option value=" + res[key]['site_abbrev'] + ">" + res[key]['name'] + "</option>";
                }
             }
             $('#site').append(htmlstring); 
              }, 
          error: function(xhr, req, err) {
             var err = eval("(" + xhr.responseText + ")");
             console.log(err.Message);
          }
    });

    var $site_val = $('#hidden_site').val();
    console.log($site_val);
    if ($site_val !== 'undefined') {
        $('#site').val($site_val);  
    }


});

这是我开始使用的静态HTML代码：

   <!--use to populate select after form is displayed -->
     <input type="hidden" id="hidden_site" name="hidden_site" value="<?php echo($details['site']);?>"/>                                             
      <select class="form-control" placeholder="Site:" name="site" id="site">
     </select>

当我运行此代码时，我可以在控制台中看到“CAN”作为包含我的网站信息的变量的val打印但是我似乎无法选择“加拿大”选项（其值为“ CAN“）从下拉列表。

编辑1

代码不起作用，但在控制台我试过这个：

 $("#site option[value='CAN'").prop('selected',true)

证明“加拿大”具有CAN的价值。 现在我看到加拿大选项已被选中。 但到目前为止发布的答案都没有对我有用。 ：/

我也试过这两个：

    $('#site option[value="' + $site_val + '"]').prop('selected', true);
    //$('#site option[value="' + $site_val + '"]').attr('selected','selected');

编辑2

这个版本也失败了。

var $site_val = $('#hidden_site').val();
console.log($site_val);  //prints CAN
if ($site_val !== 'undefined') {
    $('#site option[value="' + $site_val + '"]').change();      
    //$('#site option[value="' + $site_val + '"]').prop('selected', true);
    //$('#site option[value="' + $site_val + '"]').attr('selected','selected');
}

Answer 1

jsFiddle DEMO

$('#site').val($site_val) - >如果$('#site').val($site_val)值设置选项。

更正您的代码

由于$site_val是variable name ，因此您必须使用它的value 。 使用如下所示的字符串连接。

$('#site option[value="' + $site_val + '"]').prop('selected', true) - 这将选择已具有值CAN的选项。

Answer 2

使用javascript也有多种方法可以做到这一点。 这是jquery的方式。

只需设置值如下：

$("#whatever").val('value goes here');

另外，这是一个小提琴。

http://jsfiddle.net/CpXVB/

这很简单。 我希望有所帮助。 请让我知道，如果你有任何问题。 谢谢。

Answer 3

使用变量设置选择框的值

我想，您实际上是在尝试选择具有指定值的选项，请使用以下方法：

// to remove previously selected option, at first
$('option:selected', 'select[name="site"]').removeAttr('selected');

$('#site option[value="' + $site_val + '"]').prop('selected', true);

在某些情况下，以下也应该有效：

$('#site option[value="' + $site_val + '"]').attr('selected','selected');

此外，您应该在追加后立即将“选择”代码移动到success回调函数中，因为$.ajax方法异步工作。 所以看起来应该是这样的：

...
$('#site').append(htmlstring);
var $site_val = $('#hidden_site').val();
console.log($site_val);  //prints CAN
if ($site_val !== 'undefined') {   
    $('option:selected', 'select[name="site"]').removeAttr('selected');
    $('#site option[value="' + $site_val + '"]').prop('selected', true);
    //$('#site option[value="' + $site_val + '"]').attr('selected','selected');
} 
...