发表新帖
发表新帖

How do I dynamically set the selected option of a drop-down list using jQuery, JavaScript and HTML?

前端 未结
关注
7 1198
我在风中等你
我在风中等你 2021-02-04 09:17

For some reason, I can\'t get this to work.

My options list is populated dynamically using these scripts:

function addOption(selectId, value, text, sele
相关标签:
7条回答
  • 深忆病人
    2021-02-04 09:48

    Your code works for me. When does addSalespersonOption get called? There may be a problem with that call.

    Also some of your html is a bit off (maybe copy/paste problem?), but that didn't seem to cause any problems. Your select should look like this:

    <select id="salesperson"> 
    <option value="">(select)</option> 
</select>

    instead of this:

    <select id="salesperson" /> 
    <option value"">(select)</option> 
</select>

    Edit: When does your options list get dynamically populated? Are you sure you are passing 'on' for the defSales value in your call to addSalespersonOption? Try changing that code to this:

    if (selected == "on") { 
    alert('setting default selected option to ' + text);
    html = '<option value="'+value+'" selected="selected">'+text+'</option>'; 
}

    and see if the alert happens and what is says if it does happen.

    Edit: Working example of my testing (the error:undefined is from jsbin, not my code).

    0 讨论(0)
  • 野趣味
    2021-02-04 09:51

    Your syntax is wrong.

    You need to call attr with two parameters, like this:

    $('.salesperson', newOption).attr('defaultSelected', "selected");

    Your current code assigns the value "selected" to the variable defaultSelected, then passes that value to the attr function, which will then return the value of the selected attribute.

    0 讨论(0)
  • 长情又很酷
    2021-02-04 09:52

    Pardon my ignorance, but why are you using $('.salesperson') instead of $('#salesperson') when dealing with an ID?

    0 讨论(0)
  • 北荒
    2021-02-04 09:53

    Here it goes.

    // Select by value
$('select[name="options"]').find('option[value="3"]').attr("selected",true);

// Select by text
//$('select[name="options"]').find('option:contains("Third")').attr("selected",true);
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<html>
<body>
<select name="options">
      <option value="1">First</option>
      <option value="2">Second</option>
      <option value="3">Third</option>
</select>
</body>
</html>

    0 讨论(0)
  • 日久生厌
    2021-02-04 10:02

    The defaultSelected attribute is not settable, it's just for informational purposes:

    Quote:

    The defaultSelected property returns the default value of the selected attribute.
    This property returns true if an option is selected by default, otherwise it returns false.

    I think you want:

    $('option[value=valueToSelect]', newOption).attr('selected', 'selected');

    I.e. set the selected attribute of the option you want to select.

    Without trying to fix your code, here's roughly how I would do it:

    function buildSelect(options, default) {
    // assume options = { value1 : 'Name 1', value2 : 'Name 2', ... }
    //        default = 'value1'

    var $select = $('<select></select>');
    var $option;

    for (var val in options) {
        $option = $('<option value="' + val + '">' + options[val] + '</option>');
        if (val == default) {
            $option.attr('selected', 'selected');
        }
        $select.append($option);
    }

    return $select;
}

    You seem to have a lot of baggage and dependencies already and I can't tell you how to best integrate the selected option into your code without seeing more of it, but hopefully this helps.

    0 讨论(0)
  • 花落未央
    2021-02-04 10:02

    Here is another way you can change the selected option of a <select> element in javascript. You can use

    document.getElementById('salesperson').selectedIndex=1;

    Setting it to 1 will make the second element of the dropdown selected. The select element index start from 0.

    Here is a sample code. Check if you can use this type of approach:

    <html>
<head>
<script language="javascript">

function changeSelected() { 
document.getElementById('salesperson').selectedIndex=1;

} 

</script>
</head>
<body>
<form name="f1">

<select id="salesperson" > 
   <option value"">james</option>
   <option value"">john</option>  
</select> 
<input type="button" value="Change Selected" onClick="changeSelected();">

</form>
</body>
</html>
    0 讨论(0)
 看不清?
提交回复
热议问题