We have a select menu that is being populated via data- attributes and a knockout.js array. I'm not so familiar with jQuery as well, keep this in mind.

How could I add an option via jQuery that is the first selected one and it's disabled as well. Basically, it's being used as a placeholder. I know how to do this via HTML, but not in this way. Here is the HTML that is being used:

<select id="delemilter" data-bind="options: delimiterList, value: delimiterSelectedValue, optionsValue: 'value', optionsText: 'name', enable: true"></select>

In other select menus, one of our developers used this line of jQuery. Seems to be some knockout API stuff. Looks like an observable array:

self.selectMenuID.push({ value: 'Placeholder Text', key: 0, data: 0, disabled: true });

Can't figure out how to reuse this again... Hopefully this is enough information.

Thank you!

We have a select menu that is being populated via data- attributes and a knockout.js array. I'm not so familiar with jQuery as well, keep this in mind.

How could I add an option via jQuery that is the first selected one and it's disabled as well. Basically, it's being used as a placeholder. I know how to do this via HTML, but not in this way. Here is the HTML that is being used:

<select id="delemilter" data-bind="options: delimiterList, value: delimiterSelectedValue, optionsValue: 'value', optionsText: 'name', enable: true"></select>

In other select menus, one of our developers used this line of jQuery. Seems to be some knockout API stuff. Looks like an observable array:

self.selectMenuID.push({ value: 'Placeholder Text', key: 0, data: 0, disabled: true });

Can't figure out how to reuse this again... Hopefully this is enough information.

Thank you!

• javascript
• jquery
• html
• knockout.js

2 Answers 2

You can do this as follows:

$('#delemilter').prepend('<option disabled="disabled">My disabled Option</option>');

Remember to specify other attributes in our option's html as required.

Here is a JSFiddle for you: http://jsfiddle/loanburger/ask9L71h/

I find this way much more elegant & readable:

$("select").append($("<option>", {
    value: "foo",
    text: "bar"
}).prop("disabled", true));