I am jquery learner.
<select multiple id="update-select" data-type="test1, test2">
<option value="3">test1</option>
<option value="4">test2</option>
<option value="5">test3 test</option>
<option value="5">test test</option>
</select>
<input type="button" id ="btn" value ="click me">
$(document).ready(function() {
$("#btn").click(function(){
});
});
jsfiddle here
I am setting the data-type value dynamically based on some server data.
on clicking the button option whose value equal to data-type value must be selected
Here data-type values are test1 and test2 so option test1, and test2 must be selected on clicking the button
Note: data-type values can have two word values like test test, option text also
can have test test
$(document).ready(function() {
$("#btn").on('click', function(){
$('#update-select option').prop('selected', false);
$.each($('#update-select').data('type').split(','), function(i, opt) {
$('#update-select option:contains('+ $.trim(opt) +')').prop('selected', true);
});
});
});
FIDDLE
You can do like this:
$(document).ready(function() {
$("#btn").click(function(){
$('#update-select option').prop('selected', false);
var select = $("#update-select").attr('data-type').split(',');
for(var i=0; i<select.length; i++){
$('#update-select option:contains('+ $.trim(select[i]) +')').prop('selected', true);
}
});
});
check http://jsfiddle.net/alaminopu/V85Vx/23/
Use .filter() function to get your target option tags and select it afterwards.
$(document).ready(function() {
$("#btn").click(function(){
var xText =$('#update-select').data('type');
$('#update-select option').filter(function(){
return xText.indexOf($(this).text()) != -1;
}).prop('selected', true);
});
});
DEMO
Related
I am new to javascript I am trying to show/hide the dive based on the grouping value of selected drop down however my below code is not working
<script type="text/javascript">
$(document).ready(function(){
document.getElementById("Divid").style.display = "none"; //Div I am hiding
$(document).ready(function(){
$('#selectsample').change(function(){
var val = $(this).val(); // replace $(this) which refer to select box for which change event occurred
//var $option= $(this).find('option:selected'); -- you can use this option too
var $option= $(this).find('option[value=' + val + ']');
var val1 = $option.attr('grouping');
$("#txt1").val($option.attr(val1));// this is my textfield id=txt1
}).change();
if (val1='Yes'){
document.getElementById("Divid").style.display = "block";
}
else{ document.getElementById("Divid").style.display = "none"; }
});
</script>
my jquery
the div id is ="Divid" this one is the one I wanted to be visible when seleceted is yes
and this one
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selectsample" name="samp">
<option value="1" grouping="Yes" >first</option>
<option value="2" grouping="No" >four</option>
</select>
<input type='text' id='txt1'>
Here you go try this !!
$(document).ready(function(){
$("#selectsample").click(function(){
var status = $("#selectsample option:selected").attr("grouping");
if(status == "Yes"){
$("#Divid").show();
}else{
$("#Divid").hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<select id="selectsample" name="samp">
<option value="1" grouping="Yes" >first</option>
<option value="2" grouping="No" >four</option>
</select>
<input type='text' id='txt1'>
<div id = "Divid">
the div id is ="Divid" this one is the one I wanted to be visible when seleceted is yes
</div>
$('#Divid').hide();
$('#selectsample').on('change', function() {
if (this.value == "Yes") {
$('#Divid').show();
} else {
$('#Divid').hide();
}
});
Try this.
function ShowHideDiv()
{
var groupattr = $("option:selected", "#selectsample").attr("grouping");
if (groupattr == "Yes")
{
$("#Divid").show();
}
else
{
$("#Divid").hide();
}
}
$(document).ready(function () {
//Let's run this once in case "Yes" is the default (first) option in the dropdown
ShowHideDiv();
$("#selectsample").on("change", function () {
ShowHideDiv();
});
});
Few problems with your code...
Firstly you have a nested $(document).ready which makes no sense.
Secondly $("#txt1").val($option.attr(val1)); - This line also makes no sense as you can just do $("#txt1").val(val1); and your input will be populated correctly.
Lastly, if (val1='Yes') is wrong, a single equals sign is an assignment, comparison is two/three equal signs, to fix it just replace it with if (val1=='Yes').
I am assuming that the div with id "Divid" was just misssed in your example.
Also, as pointed out - a good practise would be to use the provided jQuery methods for selecting elements since you're already using the jQuery framework..
That means element selectors such as:
document.getElementById("Divid") can be written in jQuery as $("#Divid").
Notice the leading # symbol that tells jQuery that it's selecting an ID attribute, if you were going to select elements by class you would use a '.' instead however the later would return an array of elements.
Here's a runnable for you...
$(document).ready(function(){
$("#Divid").css("display", "none"); //Div I am hiding can use .hide(); too
$('#selectsample').change(function(){
var val = $(this).val(); // replace $(this) which refer to select box for which change event occurred
//var $option= $(this).find('option:selected'); -- you can use this option too
var $option= $(this).find('option[value=' + val + ']');
var val1 = $option.attr('grouping');
$("#txt1").val(val1);// this is my textfield id=txt1
if (val1=='Yes'){
$("#Divid").css("display", "block");
}else{
$("#Divid").css("display", "none");
}
}).change();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selectsample" name="samp">
<option value="1" grouping="Yes" >first</option>
<option value="2" grouping="No" >four</option>
</select>
<input type='text' id='txt1'>
<div id="Divid" style="height: 200px; width: 200px; background: blue;">
</div>
I have a dropdown/select menu that shows and hides various divs based on what the user has selected. Within each div there is another dropdown/select menu that I would like to also trigger an action on change.
As this div is given an ID dynamically I am struggling to figure out how to select the required dropdown/select menu.
Here is the jQuery code:
$(document).ready(function(){
$("#category").change(function(){
var category = $("#category").val();
var box = $('#'+ category);
$('.class-name').hide();
box.show();
}) ;
var category = $("#category").val();
var selector = 'selector_'+category;
$("#"+selector).change(function(){
alert('Do something');
});
});
And some simplified HTML:
<select id='category'>
<option value='0'>1</option>
<option value='1'>2</option>
<option value='2'>3</option>
</select>
<div class='box class-name' id='1'>
<select id='selector_1'>
<option value='1'>One</option>
<option value='2'>Two</option>
</select>
</div>
<div class='box class-name' id='2'>
<select id='selector_2'>
<option value='1'>One</option>
<option value='2'>Two</option>
</select>
</div>
<div class='box class-name' id='3'>
<select id='selector_3'>
<option value='1'>One</option>
<option value='2'>Two</option>
</select>
</div>
The divs show and hide as desired, but I can't for the life of me get the alert('Do Something'); to trigger which I assume is a problem with how I am trying to select the dropdown/select menu.
All help much appreciated!
Cheers, DB.
You need chain the changes. The way you made it, the code runs all at once, meaning:
When document ready, do:
Set onChange in the #category element
Find category current value (right now, none is selected, so value is undefined)
Set selector to "selector_" + undefined
Find element with id selector, since there's no element with this id, no change is defined.
Try this, instead:
$(document).ready(function() {
var categoryField = $("#category");
categoryField.change(function() {
var category = categoryField.val();
var box = $('#'+ category);
$('.class-name').hide();
box.show();
var selector = 'selector_'+category;
$("#"+selector).change(function() {
alert('Do something');
});
});
});
var category = $("#category").val();
Category is empty on page loaded.
Simple solution:
$(".box select").change(function(){
alert('Do something');
});
I checked, it's working
$("#category").change(function(){
var category = $("#category").val();
var box = $('#'+ category);
$('.class-name').hide();
box.show();
var s = $(box).find('select');
$(s).bind("change", function() {
alert("Do something");
})
})
Within each div there is another dropdown/select menu that I would
like to also trigger an action on change.
It seems you are looking to trigger event when there is a change in the dropdowns wrapped by the div
If it is so you can use jquery wild card selector
In your case all those select elements have same prefix id.
So $("[id^=selector_]") will response to to any select box which have such string as prefix
$("[id^=selector_").change(function(event){
$("#demoUp").text($(this).context.value);
});
Check this JSFIDDLE. The placeholder will be updated by the value of selectd option
To point you have change the id on document page ,use below
$(document).on("change",$("#"+selector),function(){
alert('Do something');
});
Try this:
$(document).ready(function(){
$("#category").change(function(){
var category = $(this).val();
$('.class-name').hide();
$('#'+ category).show();
$("#selector_"+category).change(function(){
alert('Do something');
});
}) ;
});
I am trying to get the content of a select option which is specified by the selected options.
I can get the selected options to tell me the data-parent but I can't use that to get the text of the parent option.
<select id="addCatSelectCats" multiple="multiple">
<option id="Cat55" data-parent="5">Parent Cat</option>
<option id="Cat357" data-parent="55">Sub Cat</option>
</select>
$(document).on('change', '#addCatSelectCats',function() {
$("#addCatSelectCats option").each(function(){
if($(this).is(':selected')){
var dataparent = $(this).attr('data-parent');
if(dataparent > 0){
var parent = $('#Cat'+dataparent).text();
alert(parent);
}
}
});
});
Where am I going wrong?
You could do with a little less code
$(document).on('change', '#addCatSelectCats',function() {
var parent = $("#addCatSelectCats option:selected").text();
alert(parent);
});
I am running a SQL query to get dropdown select value. The values are now int.
What I need to do is show the div when Dropdown Value is "Other"
So I am using this Jquery code to get the text of the dropdown that is selected. Which is working fine.
Working Example Fiddle
<select name="hours" id="hours" class="time">
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">Other</option>
<option value="06">06</option>
</select>
Script
<script type="text/javascript">
$('#hours').change(function() {
$('#hours_text').val( this.value );
$('#hours_text2').val($('option:selected',this).text());
});
</script>
The issue is when I am hiding the div. The text is not passing into Jquery. Its only accepting the option value. I need it to accept the text value which is "Other" not 05
Before the values were varchar so this was not an issue before.
Here is the code for hiding and showing Div.(not working) Fiddle
$('#hours').change(function () {
$('#hours_text').val($('option:selected', this).text());
$('.showotherpDescription').hide();
$('#' + $(this).val()).show.text();
});
Try this:
$('#hours').change(function () {
$('#hours_text').val($('option:selected', this).text());
$('.showotherpDescription').hide();
$('#' + $('option:selected', this).text()).show();
});
DEMO
the property for checking the text contained by the option would be .html() not .val()
Could you do something like this:
$('#hours').change(function () {
var sel = $('option:selected', this).text();
if (sel == "Other") {
$('.showotherpDescription').show();
} else {
$('.showotherpDescription').hide();
}
});
Here, this should do the trick. I added some console output so you can see what and why:
$('#hours').change(function () {
$('#hours_text').val($('option:selected', this).text());
$('.showotherpDescription').hide();
console.log($(this).val());
console.log(this.selectedIndex);
console.log(this.options[this.selectedIndex]);
console.log(this.options[this.selectedIndex].innerHTML);
$('#' + this.options[this.selectedIndex].innerHTML).show();
});
I want to disable the select box if Free Shipping is available.
<select name="shipping_method" id="shipping_method">
<option value="">Select shipping</option>
<option value="free_shipping">Free Shipping</option>
<option value="international_delivery">International: $30.00</option>
</select>
I've tried this (without knowing if it would work):
$(document).ready(function(){
if($("option").val() == "free_shipping") {
$("select").prop("disabled");
}
});
And then assuming on form submit:
$(document).ready(function(){
$("form").submit(function() {
$("select", this).prop("disabled", false);
});
});
You can use $.has
$('#shipping_method').has('option[value="free_shipping"]').prop("disabled", true);
Demo: Fiddle
select the select
$('#shipping_method').change(function(){
var j = $(this);
if(j.val() == 'free_shipping') {
j.attr('disabled', true);
}
else {
j.removeAttr('disabled');
}
}).trigger('change');