I'm working on my web appliction using JQuery. My select option menu doesn't print selected option.
$(function() {
$(document).on('click', ".class", function() {
if ($(this).attr("id") == "mySelect")
$("#mySelect").val($('#mySelect').val());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="mySelect" class="form-control form-control-sm class">
<option id="mySelectOptionIndex0" value=0 selected> A </option>
<option id="mySelectOptionIndex1" value=1> B </option>
<option id="mySelectOptionIndex2" value=2> C </option>
My code is working and select correct option but it doesn't print the selected option. Using browser I see that selected attribute is righty added.
I tried using e.preventDefault();, using .prop(selected, true) instead .attr() but without soluton. How can I solve? Thanks
try it to access option value or option html :
$(function() {
$(document).on('change', ".class", function() {
var optionSelected = $("option:selected", this);
var selectedText = $(optionSelected).html();
var valueSelected = this.value;
console.log(selectedText, valueSelected);
});
});
Related
I have a table with id = fields-list and inside this table 4 select box with the same class db-list. Now I want if the option in first select is selected disable this option in the rest of selectbox
<table id="fields-list" class="table table-hover">
<select class="form-control db-list" >
<option value="">All</option>
<option value="d">1</option>
<option value="t">2</option>
<option value="t">3</option>
<option value="h">4</option>
</select>
<select class="form-control db-list" >
<option value="">All</option>
<option value="d">1</option>
<option value="t">2</option>
<option value="t">3</option>
<option value="h">4</option>
</select>
</table>
I tried like this :
$('.db-list').on('change', function () {
if( $('#fields-list').find('select option[value='+$(this).val()+']:selected').length>1){
$(this).val($(this).find("option:first").val()).prop('disabled', true);
}
});
But not work. Can you help me please ? Thx in advance and sorry for my english.
Situations how need to work :
1. First Select choose option 1 (all select box from the page should disable option 1);
2. Second Select choose option 3 (all select box from the page should disable option 3 + option 1 from previous selectd)
3. First Select choose option 4 (now all select box should disable option 4 + option 3 and enable option 1)
table should be changed to something else, div for example, because table should contain thead, tbody or tr
this line:
$(this).val($(this).find("option:first").val()).prop('disabled', true);
will disable select, but not option, so try this:
$('#fields-list').find('select option[value='+$(this).val()+']:not(:selected)').prop('disabled', true);
working example
$('.db-list').on('focus', function () {
var ddl = $(this);
ddl.data('previous', ddl.val());
}).on('change', function () {
var ddl = $(this);
var previous = ddl.data('previous');
ddl.data('previous', ddl.val());
if (previous) {
$('#fields-list').find('select option[value='+previous+']').removeAttr('disabled');
}
$('#fields-list').find('select option[value='+$(this).val()+']:not(:selected)').prop('disabled', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fields-list" class="table table-hover">
<select class="form-control db-list" >
<option value="">All</option>
<option value="d">1</option>
<option value="t">2</option>
<option value="t">3</option>
<option value="h">4</option>
</select>
<select class="form-control db-list" >
<option value="">All</option>
<option value="d">1</option>
<option value="t">2</option>
<option value="t">3</option>
<option value="h">4</option>
</select>
</div>
You can use .filter() to get options with a similar value
$('select').on('change', function() {
$('option').prop('disabled', false);
$('select').each(function() {
var val = this.value;
$('select').not(this).find('option').filter(function() {
return this.value === val;
}).prop('disabled', true);
});
}).change();
$('.db-list:first').on('change', function () {
// enable all first
$('.db-list:last option').prop('disabled', false);
// disable the selected value
$('.db-list:last option[value="'+ $(this).val() +'"]').prop('disabled', true);
});
And by the way, option's shouldn't have the same value in one select option.
I want to autoselect select box option on page load. Here is my code which is not working.
jQuery(document).ready(function(){
jQuery(".configure_supre_select_1 option:eq(1)")
.attr('selected',true)
.trigger('change');
});
You are triggering the selected option instead of the select - also use prop
$(function(){
$(".configure_supre_select_1 option:eq(1)").prop('selected',true);
$(".configure_supre_select_1").trigger('change');
});
Alternatively set the value
$(function(){
$(".configure_supre_select_1").val("firstOptionValue").change();
});
$(function() {
$(".configure_supre_select_1").on("change", function() {
$(".optdiv").hide();
var val = this.value;
if (val) {
$("#" + val.replace("OptionValue", "")).show();
}
});
$(".configure_supre_select_1").val("firstOptionValue").change();
$(".configure_supre_select_2 option:eq(1)").prop('selected',true);
$(".configure_supre_select_2").trigger('change');
});
.optdiv {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select class="configure_supre_select_1">
<option value="">Please select</option>
<option value="firstOptionValue">First</option>
<option value="secondOptionValue">Second</option>
</select>
<div class="optdiv" id="first">First is selected</div>
<div class="optdiv" id="second">Second is selected</div>
<hr />
Here I use your version <br/>
<select class="configure_supre_select_2">
<option value="">Please select</option>
<option value="firstOptionValue">First</option>
<option value="secondOptionValue">Second</option>
</select>
For make real time click by jquery i added below code. It used "Event".
For change select option on page load i use below code:
jQuery(".configure_supre_select_1").val(jQuery(".configure_supre_select_1 option:eq(1)").val()).change();
and then make it real time changing i use below code:
var dropdown = $("SelectAttributeId"); // Id of select box
var element = dropdown;
var event = 'change';
var evt = document.createEvent("HTMLEvents");
evt.initEvent(event, true, true );
return !element.dispatchEvent(evt);
Select box 1
<select name="slt_drop1" id = "slt_drop1">
<option value ="0">----------</option>
...........
</select>
Select box 2
<select name="slt_drop2" id = "slt_drop2">
<option value ="0">----------</option>
...........
</select>
Select box 3
<select name="slt_drop3" id = "slt_drop3">
<option value ="0">----------</option>
...........
</select>
Select box 4
<select name="slt_drop4" id = "slt_drop4">
<option value ="0">----------</option>
...........
</select>
In a HTML form I've used 4 select buttons, if the user selects the value as "0" i.e (Default value) in any of the select button it should show message near to the select button , "please select the correct value" for that particular for example if the value of slt_drop3 is "0" it should alert near slt_drop3 select option . The message should be displayed for individual button and not common alert .
maybe this is what you want ? Demo
$("select").change(function()
{
if($(this).val() == "0")
$(this).after(' <small> please select the correct value</Small>');
else
if($(this).next().prop("tagName").toLowerCase() == "small")
$(this).next().remove();
});
$("select").trigger("change");
Do you use jQuery in your project? I think you can listen when you change the value of select and validate it:
$(function() {
$('select').on('change', validate);
function validate(e) {
var select = $(e.currentTarget);
var id = select.attr('id');
var val = select.val();
if (val === '0') {
showMessage(id);
} else {
hideMessage(id);
}
}
function showMessage(id) {
$('.message[data-select-id="' + id + '"]').show();
}
function hideMessage(id) {
$('.message[data-select-id="' + id + '"]').hide();
}
});
Add blocks for messages near each select tag and show it if necessary
<select name="slt_drop1" id = "slt_drop1">
<option value ="0">----------</option>
...........
</select>
<div class='message' data-select-id='slt_drop1'>please select the correct value</div>
Add a common class to each SELECT element.
Use jQuery to select that elements which match that class.
Bind a change event to the selector and apply the logic to check for "0" value
$(document).ready(function() {
$('select.is-valid').change(function() {
var $el = $(this);
if($el.val() == 0) {
$el.after('<div>Select a different value</div>');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="test[]" class="is-valid">
<option value="0">---</option>
<option value="1">1</option>
</select>
<select name="test[]" class="is-valid">
<option value="0">---</option>
<option value="1">1</option>
</select>
<select name="test[]" class="is-valid">
<option value="0">---</option>
<option value="1">1</option>
</select>
That's a basic example of what you're trying to achieve. Actual element/validation placement is up to you. I would recommend making a "Submit" button to check the validation but I assume you know how to do that.
I have a select dropdown list having n number of options, i want on page load, option which i selected earlier should get selected in dropdown using jquery :
Here is my html code :
<select id="myList">
<option value="1">first</option>
<option value="2">second</option>
<option value="3">third</option>
</select>
<input type="hidden" value="1" id="hiddenoptionid" />
Here is my jquery code :
$(document).ready(function() {
var projectId=document.getElementById("hiddenoptionid").value;
$("#myList option[value="+projectId+"]").attr("selected", "selected");
});
$("#projectlist").on('change', function() {
var id = $(this).val();
document.getElementById("hiddenoptionid").value=id;
location.reload();
});
Thanks.
You can use like,
$(document).ready(function(){
$("#projectlist").val($("#hiddenoptionid").val());
});
Note that, if you reload the page, $("#hiddenoptionid").val() will get reset to 1 again. If you want to retain that value, use cookies for that
<select id="dropdown">
<option value="200" selected>AMD Athlon 7x</option>
<option value="300">Core i7</option>
<option value="400">Core i5</option>
</select>
<select id="dropdown">
<option value="250" selected>GTX 560 ti</option>
<option value="350">GRX 680</option>
<option value="40">ATI 6870</option>
</select>
Im calculating price of final product base on selected value.
$('select').change(function() {
});
I need this function to remove selected attribute and assign it to selected option but i dont know how to target newly selected option.
$('select').change(function() {
$(this).children(':selected').attr('selected', true);
});
But i don't understand why you need this :)
Like this:
$('select :selected').change(function(){
//more code
});
To grab the selected option, your drop down lists should first have unique IDs
<select id="dropdown1">
<option value="200" selected>AMD Athlon 7x</option>
<option value="300">Core i7</option>
<option value="400">Core i5</option>
</select>
<select id="dropdown2">
<option value="250" selected>GTX 560 ti</option>
<option value="350">GRX 680</option>
<option value="40">ATI 6870</option>
</select>
$("#dropdown1 option:selected");
Now, that said, your drop down menu will change the first drop down selected option for you automatically.
In addition, if you want to grab the value of the selected option when it is selected, use .val()
$('select :selected').change(function(){
$("#dropdown1 option:selected").val();
});
The above examples have a syntax error. The following is incorrect (I tried it, it doesn't work):
$('select :selected').change(function(){
Below is from the jQuery site example code (I tried it too, and it does work):
<select name="garden" multiple="multiple">
<option>Flowers</option>
<option selected="selected">Shrubs</option>
<option>Trees</option>
<option selected="selected">Bushes</option>
<option>Grass</option>
<option>Dirt</option>
</select>
/* ... */
<script>
$( "select" ).change(function() { // <<<<< this is the correct syntax
var str = "";
$( "select option:selected" ).each(function() {
str += $( this ).text() + " ";
});
})
</script>