8

下面是选择选项的代码，并使用数据库中的 php 生成，我尝试selected="selected"使用value="4"jQuery 或任何 javascript 添加：

<select id="countryselect" name="country">
<option value="1">Afghanistan</option>
<option value="2">Albania</option>
<option value="3">Algeria</option>
<option value="4">Malaysia</option>
<option value="5">Maldives</option>
</select>

我尝试参考这篇文章，但仍然不能.. 下面是我当前的脚本：

<script>
localStorage.setItem("Select1", "Malaysia");
    $('#countryselect').find('option').each(function(i,e){
        if($(e).val() == localStorage.getItem("Select1")){
            $('#countryselect').prop('selectedIndex',i);
        }
    });
</script>

谢谢。

4

6 回答 6

15
于 2012-09-24T02:10:12.073 回答
13

The selected attribute is a boolean attribute, its presence sets the value of the related DOM property to true. If the attribute is absent, the value of the selected property is false.

If an option has the selected attribute, then when the page is first loaded, or the form the control is in is reset, that option will be the selected option.

If the option's selected property is set to true, then that option will be selected. However, if the form is reset, the default selected option will be selected (i.e. the one with the selected attribute, or the first option, or none).

To set the selected attribute (i.e. make the option the default selected option):

var select = document.getElementById('countryselect');
var option;

for (var i=0; i<select.options.length; i++) {
  option = select.options[i];

  if (option.value == '4') {
  // or
  // if (option.text == 'Malaysia') {
     option.setAttribute('selected', true);

     // For a single select, the job's done
     return; 
  } 
}

Note that this may not make the option the currently selected option, it will just add the selected attribute. To make sure it's selected (if that is what is required), the also set the selected property to true (see below).

Note that the second argument to setAttribute is supposed to be a string that is used to set the attribute's value. However, the selected attribute doesn't have a "setable" value, so the second argument is ignored (e.g. even false will still set the attribute and make the option the default selected option). That causes some confusion. :-)

To set the selected property (i.e. just make the option the current selected option):

var select = document.getElementById('countryselect');
var option;

for (var i=0; i<select.options.length; i++) {
  option = select.options[i];

  if (option.value == '4') {
  // or
  // if (option.text == 'Malaysia') {
     option.selected = true;
     return;
  } 
}
于 2012-09-24T02:20:29.227 回答
8

localStorage.getItem("Select1") will return Malaysia and $(e).val() will return 1,2...5 in each loop. So your condition will never be true. Instead use 

<script>
localStorage.setItem("Select1", "4");
    $('#countryselect').find('option').each(function(i,e){
        if($(e).val() == localStorage.getItem("Select1")){
            $('#countryselect').prop('selectedIndex',i);
        }
    });
</script>
于 2012-09-24T02:10:43.113 回答
6

As of jQuery 1.6 "To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method."

$("#countryselect option[value=4]").prop("selected", "selected")
于 2013-07-10T14:33:42.663 回答
1

你试一试

$("#countryselect").val('4')
    //OR

$("#countryselect option").val('4')​.attr("selected", true)​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

检查这个小提琴

于 2012-09-24T02:07:12.737 回答
-1 
$('#countryselect > option[value *= "4"] ').attr('selected',true);

this will work

于 2012-09-24T02:17:07.327 回答