We Keep Coding

.html() how to show only selected option of select?

When i do $("#form").html() my output is;
<select id="Select1" name="Select1">
<option value="Data1">Data1</option>
<option value="Data2">Data2</option>
<option value="Data3">Data3</option>
<option selected="selected" value="Data4">Data4</option>
</select>
But when i call .html() function i want to get only selected option of select like this;
<select id="Select1" name="Select1">
<option selected="selected" value="Data4">Data4</option>
</select>
How can i do it with .html() function?

You can get selected option by using selector :selected : https://learn.jquery.com/using-jquery-core/faq/how-do-i-get-the-text-value-of-a-selected-option/
let selectedOption = $("#form #Select1 option:selected");
let selectedOptionParent = selectedOption.parent()[0];
let selectedOptionTag = selectedOption[0];
let selectedOptionVal = selectedOption.val();
console.log(selectedOptionParent);
console.log(selectedOptionTag);
console.log(selectedOptionVal);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form">
<select id="Select1" name="Select1">
<option value="Data1">Data1</option>
<option value="Data2">Data2</option>
<option value="Data3">Data3</option>
<option selected="selected" value="Data4">Data4</option>
</select>
</form>

Select relevant option of multiple select based on selected option of special select

<select >
<option value="1" selected>One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
<select >
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
<select >
<option value="1">One</option>
<option value="2" selected >Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
I have multiple select box like that for example in first select box 1 is already selected so if i change option value 1 to 2 then change the selected value to 1 in which select box 2 is already selected
i am doing like
function getval(sff,sel){
var selectval=[];
$("select > option:selected").each(function(e) {
if(sel.value==this.value){
alert(this.value);
$(this).find('option[value="2"]').prop('selected', true);
}
});
}

You need to select target option of select tag in change event listener of main select. So select relevant option of selects and add selected attribute to them.
$(".main").change(function(e) {
$(this).siblings("select").find("option[value='"+$(this).val()+"']").prop("selected", true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="main">
<option value="1" selected>One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
<select >
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
<select >
<option value="1">One</option>
<option value="2" selected >Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>

when using variable as selectors, this.value becomes undefined

$(document).on("change","#groupid3,#groupid2,#groupid1",function(){
alert(this.value);
}
When I doing this , the this.value is proper.
However, if I want to dynamically generate a variable to store the id "#groupid3,#groupid2,#groupid1" as follow,
txt="#groupid3,#groupid2,#groupid1";
$(document).on("change",txt,function(){
alert(this.value);
}
the this.value is undefined.
Can anyone tell me why this is not working?Thanks !

Check again it working.
<div>
<select name="tuanpham" id="groupid1">
<option value="1">1</option>
<option value="1">2</option>
<option value="1">3</option>
</select>
<select name="tuanpham" id="groupid2">
<option value="1">1</option>
<option value="1">2</option>
<option value="1">3</option>
</select>
<select name="tuanpham" id="groupid3">
<option value="1">1</option>
<option value="1">2</option>
<option value="1">3</option>
</select>
</div>
<script>
txt="#groupid3,#groupid2,#groupid1";
$(document).on("change",txt,function(){
alert(this.value);
});
</script>

jQuery set all select inputs to certain value [duplicate]

This question already has answers here:
jQuery Loop through selects and set selected option
(3 answers)
Closed 6 years ago.
I'd like to loop through all of the select inputs on a page and if the selected value is not a certain option then set that value to selected
I have some selects (notice in select1, option 2 is selected)
<select name="select1">
<option value="1">One</option>
<option value="2" selected>Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
<select name="select2">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
<select name="select3">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
The idea here would be to have a checkbox that when it's checked set select2 and select3 to have option 2 selected as they don't have that option already selected and append a string to the value so I know they've been updated e.g '-updated'
I'm looping through them like so, but I can't figure out how to set the selected property to option '2' if it isn't already selected and then append '-updated' to the value
$('select').each(function() {
var selected = $(this).find(":selected");
if (selected.val() != 2) {
// set option 2 as selected
// append '-updated' to value
}
}
Fiddle https://jsfiddle.net/69zzr6xa/6/

var selected = 0;
$('select').each(function(i) {
var obj = $(this);
if(i == 0) selected = $(this).find(":selected");
if (obj.val() != 2) {
if (obj.val().indexOf('-updated') < 0) {
obj.val(selected.val());
obj.find(":selected").text(selected.text()+" -updated");
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<select name="select1">
<option value="1">One</option>
<option value="2" selected>Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
<select name="select2">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
<select name="select3">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
<label>Set to two
<input type="checkbox" id="set_to_two" name="set_to_two">
</label>

Check below example.
Loop through the select elements
Check if the value is already selected, if not set the value.
Also added the code to change other dropdown's, when any one is changed
$(function() {
var setValue = "2";
/* Initialize the select's to base value */
$('select').each(function() {
$(this).val(setValue);
});
/* Change the values of select's when anyone of the select changes */
$('select').change(function() {
setValue = $(this).val();
$('select').each(function() {
$(this).val(setValue);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="select1">
<option value="1">One</option>
<option value="2" selected>Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
<select name="select2">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
<select name="select3">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>

onchange - the dropdown selected using jquery

i have a dropdown in the header and whatever the value is selected in the header should reflect the same in the detail dropdown, how should i do that? any leads?
$("#myddl").change(function()
{
//update all the dropdown list...
});
http://jsfiddle.net/abuhamzah/4QvfP/
Header:
<br />
<select id="myddl" name="myddl">
<option value="1">One</option>
<option value="2">Twooo</option>
<option value="3">Three</option>
</select>
<p>Detail</p>
<br />
<select id="Select1" name="myddl">
<option value="1">One</option>
<option value="2">Twooo</option>
<option value="3">Three</option>
</select>
<br />
<select id="Select2" name="myddl">
<option value="1">One</option>
<option value="2">Twooo</option>
<option value="3">Three</option>
</select>
<br />
<select id="Select3" name="myddl">
<option value="1">One</option>
<option value="2">Twooo</option>
<option value="3">Three</option>
</select>
<br />
<select id="Select4" name="myddl">
<option value="1">One</option>
<option value="2">Twooo</option>
<option value="3">Three</option>
</select>
<br />
<select id="Select5" name="myddl">
<option value="1">One</option>
<option value="2">Twooo</option>
<option value="3">Three</option>
</select>

Something along these lines will work. It wraps your "Detail" selects in a container to make selection somewhat simpler.
http://jsfiddle.net/qMXSR/2/
$("#myddl").change(function()
{
$('.detail').find('select').val($(this).val());
});​

Use $.on to bind to the "change" event. From here we target all select elements whose id begins with Select - which includes all of those below. Then we set their value(s) to that of the current one.
​$("#myddl").on("change", function(o){
$("select[id^=Select]").val(o.target.value);
});​​​​​​​​​​

This code will do it:
$(document).ready(function()
{
$("#myddl").live('change', function()
{
$("#Select1, #Select2, #Select3, #Select4, #Select5").val($(this).val());
});
});
The updated JS Fiddle is here: http://jsfiddle.net/leniel/4QvfP/7/

​$(function(){
$('#myddl').change(function(){
var value = $(this).val();
$('select[name=myddl] option[value='+value+']').attr('selected', 'selected');
});
})​

In the onchange of the first dropdown, you can jQuery select the other dropdowns and use a .each() to iterate and set the other options.