I have multiple select boxes in the pages. I want to set focus on first element of specific select box. Here it shows how to set focus on select box. I need to say which one too. I tried below code but it didn't set the focus.
$('#thirdDropBox select:first').focus();
If you want the user to have focus on the first of multiple select's, you can use the following jQuery code:
If you have an id for the first select, you can directly access that element with the following:
$(document).ready(function () {
$('#idOfFirstSelect').focus();
});
However, if you don't have the id, the following code should work.
Demo: http://jsfiddle.net/biz79/1qo6mxnf/
$(document).ready(function () {
$('select').first().focus();
});
On a separate note, if you also want to have a default option selected, you can set that option to "selected" in the HTML:
<option value="saab" selected="selected">Saab</option>
The JQuery selector:
$('#thirdDropBox select:first')
will select the first "select" html element that is a descendant of an html-element that has an ID-attribute with the value "thirdDropBox".
For more information see: http://api.jquery.com/descendant-selector/
You probably need to remove the '#thirdDropBox"-part from your selector:
$('select:first')
Related
I have a HTML select drop down that is populated from a JQuery get request. You can view that here https://codepen.io/anon/pen/xjVjra
I am trying to get the following example element of the selected value on each change.
<small class="text-muted">ETH</small>
I have tried the following but that would just bring back the name of the selected option, which is not what I am after.
$(document).ready(function () {
$('#dropdown').on('change', function() {
alert( $(this).val()
});
});
Is it possible to drill to the inner code of the selected option and retrieve that data.
Thanks
I don't see how the question fits with the CodePen, but you could try something like this:
$("#cryptos :selected").attr("data-subtext");
I don't see any <small> tags in the HTML, as their shouldn't be because only <option> and <optgroup> are valid elements in a <select>.
If you meant <option>, you can use the :selected pseudo-class to get the actual <option> element instead of just its value:
// in select onchange where this == select element
$(this).find(':selected'); // the option element
Also, note that your CodePen example doesn't actually have the dropdown named #dropdown, so just make sure you use the appropriate selector.
Using jQuery, I am trying to disable all non-selected items from multiple select elements except for one. I was trying to exclude the one select element based on its name attribute: name="tloStatus".
$(document).ready(function () {
if($("select[name!=tloStatus]")) {
$('option:not(:selected)').attr('disabled', true);
}
});
How do I only apply this:
$('option:not(:selected)').attr('disabled', true);
to every select element but the one with name="tloStatus"?
The reason it wasn't working was because you were selecting all unselected option elements regardless of the parent select element's name attribute.
You could simplify it to the following so that only unselected option elements that are a descendant are selected:
Example Here
$("select[name!=tloStatus] option:not(:selected)").attr('disabled', true);
I need to dynamically add options to the select tags. Those options I will be fetching it from a file. There can be many selects in the form. Now I need to check all the selects whichever is in the same class If it doesn't have the option which I fetched from the file Then I need to add that option to that particular select.
var name = $(this).attr('name');
$('.slct').each(function(){
if($('this option[value="'+name+'"]').length==0)
{
$('<option>').val(name).text(name).appendTo(this);
}
});
When I tried the above code, Options are getting duplicated. For example I have 3 select tags. In the first tag I have an option called option1 remaining two tags are empty. Then after the execution of this code. First select tag contains the option1 twice and the remaining two tags contain only once. Can Someone tell me how do I do it ? I am new to jquery.
You can use find() to check if option with specific value exists in the select this way:
if($(this).find('option[value="'+name+'"]').length==0)
{
$('<option>').val(name).text(name).appendTo(this);
}
FIDDLE DEMO:
http://jsfiddle.net/3Lkv638x/1/
IS there an easy way to replicate values in to other areas
i.e. if i have 2 or 3 select menus or other form fields.
say
<select id=first>
<option>1</option>
<option>2</option>
</select>
<select id=second>
<option>3</option>
<option>4</option>
</select>
<div id=firstvalue></div>
<div id=secondvalue></div>
If i want the divs html to automatically show the values of the select box, Would I have to do a piece of code for change on either component ?
Thanks
Lee
You want one code to work on both? Try this (example on jsFiddle)
$("select").change(function() // retrieve all `select` elements
{
// gets the corresponding `div`
$("div").eq($(this).index())
.html($(this).val()); // sets the html value of the `div` to
// the selected value on the `select` element
});
From jQuery docs:
Selectors
.change()
.eq()
.index()
.val()
If you want the divs to automatically show the selected value of any selectbox you can use the following jQuery:
$('#first').change(function(){
/* target the first selectbox with id #first and bind a change event to it */
$('#firstvalue').html($(this).val());
/* set the html of the div with id #firstvalue to the selected option*/
});
/* the same for the second selectbox */
$('#second').change(function(){
$('#secondvalue').html($(this).val());
});
I would recommend changing your HTML though, so the selectboxes that are being handled have the same class and store their target within a data attribute. Like so:
HTML
<select class="show_val" data-target="#value_1">
<option>1</option>
<option>2</option>
</select>
<div id="value_1"></div>
jQuery
$('.show_val').change(function(){
$($(this).data('target')).html($(this).val());
}
This way you can use the same jQuery event for all selectboxes.
You'd use the change event on the select box via the change or bind functions, and in the event handler you'd call the html or text function to set the text on the relevant div, getting the value of the selected option via val (your option elements don't have value attributes, so val will grab their text instead). In both cases, you look up the elements via the $ (or jQuery) function passing in a CSS selector (e.g., $("#first")) for the first select box.
You could do something like this so you wouldn't have to write code for each select/div:
$('select').change(function() {
$('div[id^="' + this.id + '"]').text($(this).val());
});
JSFiddle Example
You could also check out knockout.js and implement the MVVM (Model-View-View-Model) pattern, if you're using a JavaScript backing object that is bound to the view/page.
I programmed a select box for a client which come to find out gets re-scripted by a third-party JavaScript function into a bunch of divs and spans, then finally a hidden element which contains the selected value from choosing the div/span element. There is another select box which I programmed just underneath this select box which is dependent on the value of the first select box (i.e. the user chooses a country, then if the country contains regions such as USA and Canada, a state select box appears). In any case, I thought it would be best to just add an onChange event to the newly created hidden element from the first select box and then write my own JavaScript function which would show/hide the second select box based on the hidden elements value when it changed as a result of selecting the country (the third party JavaScript already updates the hidden element value with the newly selected country value). I've tried doing this in jQuery and just straight JavaScript API, however nothing seems to work. Just FYI, when the third party javascript rescripts my select box into div/span's and a hidden input field, the hidden input field does not have an id attribute, so I reference the element through its name (collected_data[7][0]). Here's the code I tried thus far:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("input-country").change(function(e){
console.log("testA");
});
})
jQuery("input-country").change(function(e){
console.log("testB");
});
jQuery(document).ready(function(){
jQuery(document.forms['myForm']['collected_data[7][0]']).change(function(e){
console.log("testC");
});
})
jQuery(document.forms['myForm']['collected_data[7][0]']).change(function(e){
console.log("testD");
});
document.forms['myForm']['collected_data[7][0]'].onchange = function(){
console.log("testE");
};
document.getElementById('input-country').onchange = function(){
console.log("testF");
}
jQuery(document.forms['myForm']['collected_data[7][0]']).live('change',function(){
console.log("testG " + jQuery(this).val())
});
jQuery('input-country').live('change',function(){
console.log("testH " + jQuery(this).val())
});
jQuery(document).ready(function(){
jQuery(document.forms['myForm']['collected_data[7][0]']).live('change',function(){
console.log("testI " + jQuery(this).val())
});
})
jQuery(document).ready(function(){
jQuery('input-country').live('change',function(){
console.log("testJ " + jQuery(this).val())
});
})
</script>
You won't get "change" events when the hidden element is changed programatically by somebody's JavaScript code. Those are only generated by the browser when there's actually user action. What would be better would be for the 3rd-party JavaScript to explicitly call ".change()" (the jQuery method) on the hidden select.
A hidden element is clearly never going to be a target for user interaction.
'input-country' is not a valid selector. Further, the change event requires focus gain, value change, focus loss (blur)--hidden inputs will not have such a sequence of events, so you must manually trigger change on them when you change their values.