I was googling around and saw a tutorial on YouTube that uses JavaScript to auto select options based on the select value.
The JavaScript code looks like this:
$("select[value]").each(function() {
$(this).val(this.getAttribute("value"));
});
And the code that is in the HTML is this (after PHP gets the data)
<select name="group" id="group" value="4">
<option value="1">Administrator</option>
<option value="2">Member</option>
<option value="3">Developer</option>
<option value="4">Moderator</option>
<option value="5">Donator</option>
</select>
The value in the select is supposed to tell the JavaScript what is to be selected, but it's not working for me, help me please? (I'm new to JavaScript/PHP/MySQL)
That code uses the jQuery library. Given you haven't tagged your question with jQuery, I suspect maybe you don't realise that it is needed and haven't included the jquery.js file?
Add this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
(To load it from Google's CDN.)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
then try like mine, may be can help you
$(function(){
var val = $("select[name=group]").val();
$("select[name=group]").change(function(){
val = $(this).val();
});
}
Related
I am using javascript code to select a option on body load as shown in the snippet. This works fine for me.
The issue i am facing in the next step is that i am not able to call onchange event dynamically as soon as the value gets selected in selectpicker.
Code what i have written to select the options dynamically
$('select[name=pname]').val(pnamea);
$('.selectpicker').selectpicker('refresh');
After this i am mapping a simple function addcname1 to onchange event which gives an alert of selected option. but this is not working for me.
Snippet has been provided which explain the problem statment more clearly.
Can you please guide me through where i am going wrong?
Thanks
function openmd2(pnamea){
$('select[name=pname]').val(pnamea);
$('.selectpicker').selectpicker('refresh');
$(document).on('change','.selectpicker',function(){
addcname1(this.options[this.selectedIndex])
});
}
function addcname1(getval){
var myname = getval.getAttribute('value');
alert(myname)
}
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.js"></script>
<body onload="openmd2('1')">
<select class="selectpicker" name="pname">
<option value="0">select</option>
<option value="1">Mustard</option>
<option value="2">Ketchup</option>
<option value="3">Relish</option>
</select>
</body>
In your code you have to do some small changes to make it running.
$(document).on('change','.selectpicker',function(){
addcname1(this.options[this.selectedIndex])
});
function openmd2(pnamea){
$('select[name=pname]').val(pnamea).change();
}
function addcname1(getval){
var myname = getval.getAttribute('value');
alert(myname)
}
Here I have just changed the $('select[name=pname]').val(pnamea) with $('select[name=pname]').val(pnamea).change(); to make it running
You can refer this like to get the exact answer
https://jsfiddle.net/Sakshigargit15/j4ccdeaq/17/
It will not give you an alert. Understand it this way.
1- By default, you will have value 1 selected from the first two lines of your function openmd2(pnamea) which will be called on your onLoad().
2- Now in the third line, it gets a call to monitor for the onChange event.
$(document).on('change','.selectpicker',function(){
addcname1(this.options[this.selectedIndex])
});
3- And hence moving forward, if you change the dropdown, you will get the alert. But not the first time (your onload) since there are no listeners waiting for its change.
AFAIK, its working like you wrote it.
I need to display two select lists with the same options (there are many).
I have the index.html:
<body>
<select class="c_select1"></select>
<select class="c_select2"></select>
</body>
and in another html file (options.html) all the options (only the options):
<option value='AED' title='United Arab Emirates Dirham'>AED</option>
<option value='AFN' title='Afghan Afghani'>AFN</option>
<option value='ALL' title='Albanian Lek'>ALL</option>
<option value='AMD' title='Armenian Dram'>AMD</option>
<option value='ANG' title='Netherlands Antillean Guilder'>ANG</option>
...
<option value='AOA' title='Angolan Kwanza'>AOA</option>
<option value='ARS' title='Argentine Peso'>ARS</option>
<option value='AUD' title='Australian Dollar'>AUD</option>
<option value='AWG' title='Aruban Florin'>AWG</option>
<option value='AZN' title='Azerbaijani Manat'>AZN</option>
Then, using jQuery, I load options inside the two select tags with the same instruction with different class selector:
$(".c_select1").load("options.html");
I'd like to display as default selected option two different values (since I need to show a currency converter).
I've tried in 2 different ways, but any of these works fine (I show the code for just one).
<script type="text/javascript">
$(".c_select1").load("options.html");
$(".c_select1 option[value=ARS]").prop("selected", true);
</script>
or
$(".c_select1").val("ARS");
I don't know why, but I think there is a problem with the .load() of jQuery.
The only solutions that work are 2:
set a timer and execute the second jQuery statement after this timer
use 2 different options.html files one for each select tag, but I think it is not so clever.
Is there a better way to do this dynamically?
Try this:
$(".c_select1").load("options.html", function(){
$(".c_select1").val("ARS");
});
Explained:
The .load() jQuery method requires some time to get the contents of options.html (even if its just a few milliseconds). The browser doesn't wait for it before continuing to run the rest of the javascript logic. The function(){ I added to your .load( method call is some javascript logic that runs AFTER the results have returned (aka a "callback").
Use a callback :
$(".c_select1").load("options.html", function() {
$(".c_select1").val("ARS");
});
$(".c_select2").load("options.html", function() {
$(".c_select2").val("ARS");
});
Actually there is a delay of load method that is why selected item is not working. Like #Joulss said use callback method that should work. You can see the here.
$(function(){
$(".c_select1").load("option.html", function() {
$(".c_select1").val("AFN");
});
$(".c_select2").load("option.html", function() {
$(".c_select2").val("ANG");
});
});
Demo
I would like to have a tag search button in Tumblr by selection using the select option but I am not sure how to insert the onclick event using Tumblr's {text:Search Label}.
form action = "">
<select name = "Cities">
<option value="----">--Select--</option>
<option value="roma">Roma</option>
<option value="torino">Torino</option>
<option value="milan">Milan</option>
</select>
Anyone here can help? Thanks.
Well here is my code: http://jsfiddle.net/htWW6/
This is the script:
$(document).ready(function(){
$('select').bind('change',function(){
var loc = $(this).val();
location = "/tagged/" + loc;
});
});
This is jquery, so if your theme currently has this installed (many do) then that code should work off the shelf. If not then it is very easy to add jquery, but if you need a pure JS solution, I cannot help with that. Although the other answer does offer some insight.
I think this should be really easy, but I can't seem to find an answer.
I'm using rails 4 and jquery to identify when one of multiple select boxes is altered on a page, and if so, perform some action.
This is the relevant code in my application.js file:
$('body').on('change', 'select',function(){
*action*
});
The issue I'm having is that this code will pick up a select box change on any page within my application. How do I set things up so that it will only pick up select box changes on a specific page?
Do I do this by creating a new .js file which is specific to my view? If so, how do the file naming conventions work?
there are several ways to do this, but the cleanest seems to be this : add a class to the select you wish to be handled by this function. Let's call this class handlethis. The change your jQuery selector accordingly.
You HTML would look like :
<select name="myselect" id="myselect" class="handlethis">
<option value="1">option 1</option>
<option value="2">option 2</option>
...
</select>
and the JS :
$('body').on('change', 'select.handlethis',function(){
*action*
});
I have an example for you to understand this.I hope it will be helpful to you.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
$('select').change(function(){ // when one changes
$('select').val( $(this).val() ) // they all change
})
})
</script>
<style type="text/css">
</style>
<title>HELLO</title>
</head>
<body>
(top of the page)
<select>
<option value="big1">1big1</option>
<option value="big2">2big2</option>
</select>
other content here...
(bottom of the page)
<select>
<option value="big1">big1</option>
<option value="big2">big2</option>
</select>
</body>
</html>
If it is helpful to you then please vote it up.
Provide id for the select box.and use that id for call function
To pick only the select you want, just add an id or a class to the select, your code should look like this :
HTML :
<select id="selector" name="selector">
...
</select>
JS :
$('#selector').change(function() {
*action*
});
The change() function is just a shortcut for on('change').
You can add a new JS file specific to your view, for best practice about it, read this post :
Best way to add page specific javascript in a Rails 3 app?
I am trying to invoke bootstrap plugin for my webpage.
This is the plugin I am talking about:
Select Picker
Select Picker 2
When I invoke the plugin from my html file like this:
<html>
<head></head>
<body>
<select class="selectpicker show-tick" id="tag" ata-style="btn-primary">
<option>stocks</option>
<option>bank</option>
<option>card</option>
</select>
<script type="text/javascript">
$(window).on('load', function () {
$('.selectpicker').selectpicker('hide');
});
</script>
</body>
</html>
The output is fine; the select boxes come with all CSS loaded as showed in the links above.
However, when I create the boxes dynamically from a JS file, the select boxes come up as plain Select boxes with no effects.
var selectElement1_act = document.createElement("select");
selectElement1_act.setAttribute("class", "selectpicker");
Any help would be appreciated.
This is because you're invoking the function on the window load event, and when elements are created dynamically, they do not necessarily exist in the DOM at that point.
Since you're using jQuery, you'd be better to utilise the following code in your JS file instead:
$(function() {
var selectPicker = $('<select class="selectpicker" />');
selectPicker.appendTo('body');
selectPicker.selectpicker('hide');
});