javascript - How to programmatically set radiobutton and select option with js - Stack Overflow

admin管理员组

文章数量:1339774

For ex. we have

<select id="menu">
<option value="1">sample 1</option>
<option value="2">sample 2</option>
</select>

and

<input type="radio" id="parentcheck" value="1">Button 1 
<input type="radio" id="parentcheck" value="2">Button 2 

I want to simply "clone" user input. Let's say we want to set them to exact values and trigger their functions.

---

In my case i have functions for both of them

 $("#menu").change(function () {...
 $(".parentcheck").click(function () {...

For ex. how to select Sample 1 and Button 1 and fire their function?

For ex. we have

<select id="menu">
<option value="1">sample 1</option>
<option value="2">sample 2</option>
</select>

and

<input type="radio" id="parentcheck" value="1">Button 1 
<input type="radio" id="parentcheck" value="2">Button 2 

I want to simply "clone" user input. Let's say we want to set them to exact values and trigger their functions.

---

In my case i have functions for both of them

 $("#menu").change(function () {...
 $(".parentcheck").click(function () {...

For ex. how to select Sample 1 and Button 1 and fire their function?

• javascript
• jquery

Share Improve this question Follow asked Oct 5, 2011 at 17:03 LEQADALEQADA 2,00233 gold badges2626 silver badges4343 bronze badges 1

• ment from @f0x originally via the answers: "you have two element with the same id, that's invalid and could be replaced by a classname" – ndequeker Commented Feb 21, 2018 at 13:00

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 5

For the first case you can use .val() and trigger the event manually in both cases.

Consider the following

$('#menu').val(2).trigger('change');

In the above, we select the option with the value of 2.

And for the radio buttons

$('#parentcheck').prop('checked', true).trigger('change');

Just set the attribute of the option/checkbox

For the options it is "selected" and for the checkboxes it is "checked"

Also, trigger the event after that using trigger()

Example:

$( '#menu option[value=whatever]' ).attr( 'selected', 'selected' ).trigger( 'change' );
$( '.parentcheck' ).attr( 'checked', 'checked' ).trigger( 'click' );

I think this is something you are looking for...

$("#menu option[value='1]").attr("selected",true).trigger("change");
$("input[type='radio'][value='1']").attr("checked",true).trigger("change");

Again the same answer

$("#menu option[value='1]").prop("selected",true).trigger("change");

$("input[type='radio'][value='1']").prop("checked",true).trigger("change");

use .prop instead of .attr

Here is an example in pure javascript:

const $ = document.querySelector.bind(document);

$('#fee').checked = true;

setTimeout(() => {
    $('#one').checked = true;
},1500)

<input id="one" type="radio" name="bonk"/> One 
<input id="two" type="radio" name="bonk"/> Two 
<input id="fee" type="radio" name="bonk"/> Three

本文标签： javascriptHow to programmatically set radiobutton and select option with jsStack Overflow