Asked  7 Months ago    Answers:  5   Viewed   47 times

I have the following HTML <select> element:

<select id="leaveCode" name="leaveCode">
  <option value="10">Annual Leave</option>
  <option value="11">Medical Leave</option>
  <option value="14">Long Service</option>
  <option value="17">Leave Without Pay</option>
</select>

Using a JavaScript function with the leaveCode number as a parameter, how do I select the appropriate option in the list?

 Answers

89

You can use this function:

selectElement('leaveCode', '11')

function selectElement(id, valueToSelect) {    
    let element = document.getElementById(id);
    element.value = valueToSelect;
}
Tuesday, June 1, 2021
 
twk
answered 7 Months ago
twk
31
$('#mySelect')
    .find('option')
    .remove()
    .end()
    .append('<option value="whatever">text</option>')
    .val('whatever')
;
Friday, June 4, 2021
 
kinske
answered 7 Months ago
99

Note: The Question and this Answer are for Select2 v3. Select2 v4 has a very different API than v3.

I think the problem is the initSelection function. Are you using that function to set the initial value? I know the Select2 documentation makes it sound like that is it's purpose, but it also says "Essentially this is an id->object mapping function," and that is not how you have implemented it.

For some reason the call to .trigger('change') causes the initSelection function to get called, which changes the selected value back to "ENABLED_FROM_JS".

Try getting rid of the initSelection function and instead set the initial value using:

autocompleteInput.select2('data', {id:103, label:'ENABLED_FROM_JS'});

jsfiddle

Note: The OP has supplied the formatResult and formatSelection options. As supplied, those callback functions expect the items to have a "label" property, rather than a "text" property. For most users, it should be:

autocompleteInput.select2('data', {id:103, text:'ENABLED_FROM_JS'});

More info on the initSelection function:

If you search through the Select2 documentation for "initSelection", you will see that it is used when the element has an initial value and when the element's .val() function is called. That is because those values consist of only an id and Select2 needs the entire data object (partly so it can display the correct label).

If the Select2 control was displaying a static list, the initSelection function would be easy to write (and it seems like Select2 could supply it for you). In that case, the initSelection function would just have to look up the id in the data list and return the corresponding data object. (I say "return" here, but it doesn't really return the data object; it passes it to a callback function.)

In your case, you probably don't need to supply the initSelection function since your element does not have an initial value (in the html) and you are not going to call its .val() method. Just keep using the .select2('data', ...) method to set values programmatically.

If you were to supply an initSelection function for an autocomplete (that uses ajax), it would probably need to make an ajax call to build the data object.

Sunday, August 8, 2021
 
Sagar
answered 4 Months ago
48

The easiest thing to do is to always keep the canvas in its own div.

The only thing that will ever be in this div is the canvas.

Then you can use CSS to resize the div however you want. You want it as large as the body? Give the div width: 100%.

Then you can always rightfully do:

canvas.width = theDiv.clientWidth;
canvas.height = theDiv.clientHeight;

If you do this you won't have to worry about the weird issues that you're currently facing when the body is the direct parent of the div.

Wednesday, August 11, 2021
 
ramdemon
answered 4 Months ago
99

isContentEditable doesn't have anything to do with forms and input boxes. It was designed to be a way to flag inline editable html content.

You can see a working example here: http://www.navioo.com/javascript/dhtml/isContentEditable_Example_4513.html

You can read about it

here: http://www.w3.org/TR/2009/WD-html5-20090423/editing.html

or: http://blog.whatwg.org/the-road-to-html-5-contenteditable

Monday, November 29, 2021
 
Abdul Wahab Butt
answered 1 Week ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :
 
Share