jquery .html() not getting latest selected value, code here
<div id="testDiv">
<select id="mySel">
<option value="1">opt 1</option>
<option selected value="2">opt 2</option>
<option value="3">opt 3</option>
<option value="4">opt 4</option>
</select>
</div>
and script
$(document).ready(function(){
$('#mySel').val('3');
var divContent = $('#testDiv').html();
alert(divContent);
});
getting an output like this
<select id="mySel">
<option value="1">opt 1</option>
<option selected value="2">opt 2</option>
<option value="3">opt 3</option>
<option value="4">opt 4</option>
</select>
'selected' not getting changed, i need output like this
<select id="mySel">
<option value="1">opt 1</option>
<option value="2">opt 2</option>
<option selected value="3">opt 3</option>
<option value="4">opt 4</option>
</select>
$(document).ready(function(){
$('#mySel').val('4');
$("#mySel").find('option').removeAttr("selected");
$("#mySel option[value='4']").attr("selected","selected");
var divContent = $('#testDiv').html();
alert(divContent);
});
Output:
<select id="mySel">
<option value="1">opt 1</option>
<option value="2">opt 2</option>
<option value="3">opt 3</option>
<option selected="selected" value="4">opt 4</option>
</select>
For your desired output you will need to add a script to move the selected attribute to the correct <option> when the user changes the value. By default the select list will not modify your markup based on the user's actions.
Related
I have two Selectbox groups.
When the user selects an item from the 1st Selectbox group; According to the selected Value, I want to disable some of the items in the 2nd Selectbox group.
Below is my sample code. The example scenario I want to do based on the following set of code is as follows:
<select name="group1" id="group1">
<option value="12">Opt 1</option>
<option value="13">Opt 2</option>
<option value="21">Opt 3</option>
<option value="22">Opt 4</option>
<option value="24">Opt 5</option>
<option value="35">Opt 6</option>
<option value="57">Opt 7</option>
<option value="62">Opt 8</option>
</select>
<select name="group2" id="group2">
<option value="12">Opt 1</option>
<option value="13">Opt 2</option>
<option value="21">Opt 3</option>
<option value="22">Opt 4</option>
<option value="24">Opt 5</option>
<option value="35">Opt 6</option>
<option value="57">Opt 7</option>
<option value="62">Opt 8</option>
</select>
For example: If the user selects <option value="22">Opt 4</option> from the 1st Selectbox,
In Selectbox 2. group this option items should automatically become "disabled" in the group:
<option value="12">Opt 1</option>
<option value="13">Opt 2</option>
<option value="21">Opt 3</option>
<option value="22">Opt 4</option>
So what I want to do is as follows: According to the value values in the Selectbox, after each item selection, it should be able to select larger values of the current selection in the other Selectbox step.
Using the jQuery on('change' listener, we can access the current selected value with $(this).val() - then loop through the second select, setting .prop('disabled' to true/false based on it's value being equal to or less than the first selected value. Because we're comparing Numbers but the values we're getting are strings, we need to convert them with Number(), parseInt() or the shorthand prefix operator +
$('#group1').on('change', function() {
let val = Number($(this).val());
$('#group2 option').each(function() {
$(this).prop('disabled', Number($(this).val()) <= val)
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="group1" id="group1">
<option value="12">Opt 1</option>
<option value="13">Opt 2</option>
<option value="21">Opt 3</option>
<option value="22">Opt 4</option>
<option value="24">Opt 5</option>
<option value="35">Opt 6</option>
<option value="57">Opt 7</option>
<option value="62">Opt 8</option>
</select>
<select name="group2" id="group2">
<option value="12">Opt 1</option>
<option value="13">Opt 2</option>
<option value="21">Opt 3</option>
<option value="22">Opt 4</option>
<option value="24">Opt 5</option>
<option value="35">Opt 6</option>
<option value="57">Opt 7</option>
<option value="62">Opt 8</option>
</select>
$('#group1').on('change' , function(){
var value = $(this).find('option:selected').val();
$('#group2').find('option').prop('disabled',false);
$('#group2').find('option').each(function(i,e){
var opt = $(e);
if(opt.val() < value){
opt.prop('disabled',true);
}
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="group1" id="group1">
<option value="12">Opt 1</option>
<option value="13">Opt 2</option>
<option value="21">Opt 3</option>
<option value="22">Opt 4</option>
<option value="24">Opt 5</option>
<option value="35">Opt 6</option>
<option value="57">Opt 7</option>
<option value="62">Opt 8</option>
</select>
<hr>
<select name="group2" id="group2">
<option value="12">Opt 1</option>
<option value="13">Opt 2</option>
<option value="21">Opt 3</option>
<option value="22">Opt 4</option>
<option value="24">Opt 5</option>
<option value="35">Opt 6</option>
<option value="57">Opt 7</option>
<option value="62">Opt 8</option>
</select>
I am sharing an example above. When there is a change in the first selectbox, it takes the selected value and compares the second selectbox, if the selected value is large, it adds a disabled attribute.
After selecting option from list hide placeholder (Select option). If after clicked on select box placeholder must be hidden.
<select class="name">
<option value="">Select Option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>
You could do it like this:
$("select").change(function() {
$(this).find("option:first").hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="name">
<option value="">Select Option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>
you can set a js-handler, to remove the Option-noe (here the jQuery Version):
<select class="name" id="myselect">
<option value="">Select Option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>
and the js
jQuery(function(){
jQuery ('#myselect').on('change', function(){
jQuery(this).find('[value=""]').remove();
})
});
https://jsfiddle.net/k08zj6r9/
if you wish, you can disable the node, instead of remove.
jQuery(this).find('[value=""]').attr('disabled','disabled');
I am currently trying to make a simple web application which logs to the console the values that are selected in an HTML drop-down menu. However, whenever I change my options in a different select, it ends up showing a value in the #player select. For example, if I chose Shot on Cage and clicked save, the console would show that the value to be b. If I am not explaining this thoroughly enough, please let me know, and I will try to re-explain my difficulties.
function myFunction() {
var a = document.getElementById("player").selectedIndex;
console.log(document.getElementsByTagName("option")[a].value);
var b = document.getElementById("what").selectedIndex;
console.log(document.getElementsByTagName("option")[b].value);
var c = document.getElementById("where").selectedIndex;
console.log(document.getElementsByTagName("option")[c].value);
var d = document.getElementById("when").selectedIndex;
console.log(document.getElementsByTagName("option")[d].value);
}
<select id="player">
<option value="b">B</option>
<option value="n">N</option>
<option value="a">A</option>
<option value="c">C</option>
<option value="m">M</option>
<option value="j">J</option>
<option value="ja">Ja</option>
</select>
<select id="what">
<option value="shoton">Shot on Cage</option>
<option value="shotoff">Shot off Cage</option>
<option value="goal">Goal</option>
<option value="assist">Assist</option>
<option value="block">Block</option>
<option value="steal">Steal</option>
<option value="turnover">Turnover</option>
<option value="drawn">Ejection Drawn</option>
<option value="ejected">Ejected</option>
</select>
<select id="where">
<option value="set">Set</option>
<option value="navy">Navy</option>
<option value="leftwing">1/2 side past 5</option>
<option value="rightwing">4/5 side past 5</option>
<option value="point">Point/3</option>
<option value="lefttwo">1/2 side 2 meter</option>
<option value="righttwo">4/5 side 2 meter</option>
<option value="1">6 on 5 1</option>
<option value="2">6 on 5 2</option>
<option value="3">6 on 5 3</option>
<option value="4">6 on 5 4</option>
<option value="5">6 on 5 5</option>
<option value="6">6 on 5 6</option>
</select>
<select id="when">
<option value="q1">Quarter 1</option>
<option value="q2">Quarter 2</option>
<option value="q3">Quarter 3</option>
<option value="q4">Quarter 4</option>
</select>
<button type="button" onclick="myFunction()"> Save </button>
This will work for you.
.getElementsByTagName("option") will ruin your result as it will select all the <option> tags and it post the result as one.
So try this code it will work.
function myFunction() {
var a = document.getElementById("player");
console.log(a.options[a.selectedIndex].value);
var b = document.getElementById("what");
console.log(b.options[b.selectedIndex].value);
var c = document.getElementById("where");
console.log(c.options[c.selectedIndex].value);
var d = document.getElementById("when");
console.log(d.options[d.selectedIndex].value);
}
<select id="player">
<option value="b">B</option>
<option value="n">N</option>
<option value="a">A</option>
<option value="c">C</option>
<option value="m">M</option>
<option value="j">J</option>
<option value="ja">Ja</option>
</select>
<select id="what">
<option value="shoton">Shot on Cage</option>
<option value="shotoff">Shot off Cage</option>
<option value="goal">Goal</option>
<option value="assist">Assist</option>
<option value="block">Block</option>
<option value="steal">Steal</option>
<option value="turnover">Turnover</option>
<option value="drawn">Ejection Drawn</option>
<option value="ejected">Ejected</option>
</select>
<select id="where">
<option value="set">Set</option>
<option value="navy">Navy</option>
<option value="leftwing">1/2 side past 5</option>
<option value="rightwing">4/5 side past 5</option>
<option value="point">Point/3</option>
<option value="lefttwo">1/2 side 2 meter</option>
<option value="righttwo">4/5 side 2 meter</option>
<option value="1">6 on 5 1</option>
<option value="2">6 on 5 2</option>
<option value="3">6 on 5 3</option>
<option value="4">6 on 5 4</option>
<option value="5">6 on 5 5</option>
<option value="6">6 on 5 6</option>
</select>
<select id="when">
<option value="q1">Quarter 1</option>
<option value="q2">Quarter 2</option>
<option value="q3">Quarter 3</option>
<option value="q4">Quarter 4</option>
</select>
<button type="button" onclick="myFunction()"> Save </button>
options[a.selectedIndex].value this simple will get you the value of the selected option value in the select and in javascript option in a property of select which we can combain with selectedIndex property and get you value.
Hope this was helpfull.
you have many options split into 4 selects ... document.getElementsByTagName will receive them ALL ... so using the selectedIndex is only valid for the fist select
you can use getElementsByTagName on any element - so, in this case you would use it on the select element
function myFunction() {
var a = document.getElementById("player");
console.log(a.getElementsByTagName("option")[a.selectedIndex].value);
var b = document.getElementById("what");
console.log(b.getElementsByTagName("option")[b.selectedIndex].value);
var c = document.getElementById("where");
console.log(c.getElementsByTagName("option")[c.selectedIndex].value);
var d = document.getElementById("when");
console.log(d.getElementsByTagName("option")[d.selectedIndex].value);
}
<select id="player">
<option value="b">B</option>
<option value="n">N</option>
<option value="a">A</option>
<option value="c">C</option>
<option value="m">M</option>
<option value="j">J</option>
<option value="ja">Ja</option>
</select>
<select id="what">
<option value="shoton">Shot on Cage</option>
<option value="shotoff">Shot off Cage</option>
<option value="goal">Goal</option>
<option value="assist">Assist</option>
<option value="block">Block</option>
<option value="steal">Steal</option>
<option value="turnover">Turnover</option>
<option value="drawn">Ejection Drawn</option>
<option value="ejected">Ejected</option>
</select>
<select id="where">
<option value="set">Set</option>
<option value="navy">Navy</option>
<option value="leftwing">1/2 side past 5</option>
<option value="rightwing">4/5 side past 5</option>
<option value="point">Point/3</option>
<option value="lefttwo">1/2 side 2 meter</option>
<option value="righttwo">4/5 side 2 meter</option>
<option value="1">6 on 5 1</option>
<option value="2">6 on 5 2</option>
<option value="3">6 on 5 3</option>
<option value="4">6 on 5 4</option>
<option value="5">6 on 5 5</option>
<option value="6">6 on 5 6</option>
</select>
<select id="when">
<option value="q1">Quarter 1</option>
<option value="q2">Quarter 2</option>
<option value="q3">Quarter 3</option>
<option value="q4">Quarter 4</option>
</select>
<button type="button" onclick="myFunction()"> Save </button>
That being said, this still isn't the best solution - use #weBBer's code INSTEAD
because a <select> element has a property called options, which you can use the selectedIndex property to get the selected <option> - see the better answer for an example
I have a drop down list like
<select name="select">
<option value="value2">Value 2</option>
<option value="value3">Value 3</option>
</select>
I want to add one extra <option> tag at the top like
<select name="select">
<option value="value1" disabled selected>Value 1</option>
<option value="value2">Value 2</option>
<option value="value3">Value 3</option>
</select>
How can i do it with jquery.
$(
'<option></option>',
{value:"newvalue",text:"new option"}
).attr({
disabled:"disabled",
selected:"selected"
}).prependTo("select[name='select']")
What's wrong in my code that the append method dont work? I do get the alert but the actual method that will append is not working. Please see the code below:
jQuery(document).ready(function()
{
if (!document.getElementById('my_options').value)
{
alert('here');
jQuery('#my_options').append('<span id="option_id_error" class="errors">Error</span>');
}
});
HTML:
<select id="my_options" name="my_options">
<option value="">--Select--</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
<br/>
<select id="my_options2" name="my_options2">
<option value="">--Select--</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
<br/>
<select id="my_options3" name="my_options3">
<option value="">--Select--</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
The select in the form is dynamically generated. If none is selected on the dropdown box, it will display the span error message. So my expected result is this:
<select id="my_options" name="my_options">
<option value="">--Select--</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select> <span>Error</span>
I don't need to add something on the options.
What you are doing is not correct as a SPAN item is not valid within an SELECT item.
If you try to add a new option for example it will work
$('#my_options').append('<option value="5">item</option>');
what you can do is to wrap the select item inside a DIV as showed below
<div id="option1">
<select id="my_options" name="my_options">
<option value="">--Select--</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
</div>
than you can do:
$('#option1').append('<span id="option_id_error" class="errors">Error</span>');
you can see it working at the below link
http://jsfiddle.net/LGkWp/
if you need to add this <span> element just next to <select> you may use .after(..) method:
jQuery('#my_options').after('<span id="option_id_error" class="errors">Error</span>');