I need to run a jquery function if a certain dropdown option is selected.
<select name=dropdown size=1>
<option value=1>option 1</option>
<option value=2>option 2</option>
</select>
I have the commands in the function ready, Im just not sure on how to make it so if option 2 is currently active in the dropdown, then run the function.
(dropdown doesnt have a submit button, i want it ran when the user highlights the option)
Try this demo http://jsfiddle.net/JGp9e/
This will help, have a nice one!
code
$('select[name="dropdown"]').change(function(){
if ($(this).val() == "2"){
alert("call the do something function on option 2");
}
});
HTML
<select name="dropdown" size=1>
<option value="1">option 1</option>
<option value="2">option 2</option>
</select>
use
$("#idofselectbox").change(function(){
// your code here
});
hope this helps....
Try this one, Demo on JsFiddle
$('select[name="dropdown"]').change(function() {
alert($(this).val());
});
$(document).ready(function() {
$("select[name='dropdown']").change(function() {
alert($(this).val());
});
});
You need to use change function
$('select[name=dropdown]').change(function() {
alert($(this).val());
});
$(document).ready(function() {
$("select[name='dropdown']").change(function() {
if($(this).val()==2){
//do what u want here
}//u can check your desired value here
});
});
I think you want this.
A simple way can be as following:
<select name="select" id="select" onChange="window.location = this.value">
<option value="/en">English</option>
<option value="/ps">Pashto</option>
</select>
Related
I use select as below:
<select name="account_type" required>
<option value="">Choose Account Type</option>
<option value="1">Asset</option>
<option value="2">Bank</option>
<option value="3">Capital</option>
<option value="4">Cash</option>
<option value="5">Expense</option>
<option value="6">Income</option>
<option value="7">Liability</option>
</select>
Now I want to catch those option values using php variable, and here is the important part: I will have an input field, and based on the values I want to enable/disable that input filed.
How can I do that?
Using jQuery give your select an id like below
<select name="account_type" id="account" required>
<option value="">Choose Account Type</option>
<option value="1">Asset</option>
<option value="2">Bank</option>
<option value="3">Capital</option>
<option value="4">Cash</option>
<option value="5">Expense</option>
<option value="6">Income</option>
<option value="7">Liability</option>
</select>
<!--input to be disabled -->
<input type="text" id="disable">
jQuery
$('#account').on('change', function(){
if($(this).val() === '1') {
$("#disable").prop('disabled', true);
//you can also send data to PHP here using AJAX
//var data = {one: $(this).val()};
//$.post( "test.php", data, function( data ) {
//$( ".result" ).html( data );
//});
}else if($(this).val() === '2') {
//code here
}
//check for other values
});
example
You could do this with jQuery. If you don't know jQuery, check this out: jQuery.com
After you "installed" jQuery, you can use this in your js-File. I hope that you know how to create and use a js-File.
The next thing is to implement a good method for your select-button.
This could look like this in your js-File:
$('#my-select').change(function(){ // "#my-select" is the ID of your select. You need to implement a ID.
//do stuff here, eg.
if ($(this).val() == '5') { //check the selected option etc.
$("input").prop('disabled', true);
} else {
$("input").prop('disabled', false);
}
});
Here's a jsFiddle.
Hope this helps you.
html code
<select>
<option data-id="1">1</option>
<option data-id="2">2</option>
</select>
JQuery code
$(document).ready(function(){
$("select").change(function(){
var display= $("select").val();
if(display == 1){
$("select").attr("disabled", 'disabled');
}
});
});
I am not sure what you want exactly.check out this may be it will be helpful for you JSFiddle
I'm wanting to have a dropdown on my form, the options will be titles to content in my database, I want the content to show in a ckeditor when delected.
I'm looking to do something like the below with jquery and need a little help.
if 'dropdown' value is not 'please select'
CKeditor value equals php variable from database.
end statement
I'm fairly happy getting the variables in php so just need some jquery to change the ckeditor value dependant on the dropdown not being defaulted.
Hope this makes sense and thanks in advance for any responses.
html:
<select name="select" id="select">
<option value="">Select</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
<option value="option4">Option 4</option>
<option value="option5">Option 5</option>
</select>
<div id="result" style="border:1px solid #000;padding:10px;color:#ff0000;display:none;"></div>
jQuery dont forget to include the jquery file
$(document).ready(function(){
$('#select').change(function() {
var option = $(this).val();
$.get('select.php', {select:option}, function(data) {
$('#result').html(data).hide().fadeIn(1000);
});
});
});
your php file (select.php)
if(!empty($_GET['select'])) {
//call database and bring back the content for this selection and echo it
}
First you would need to populate the "option" elements of your select box using php, which I believe you said you are comfortable with.
Then, using jQuery:
$(document).ready(function(){
$('#myCKEditorTextArea').text($('#mySelectBox').val());
});
for pre-population on page load, or:
$('#mySelectBox').change(function(){
$('#myCKEditorTextArea').text($(this).val());
});
for population when the user changes the select box value.
I'm new with this JQuery Mobile thing. And the first problem i met in this is i can't set "selected" attr on multiple select option to "false" / unselected in JQuery mobile using Javascript.
A documentation i found told me to refreshing a select so i can manipulate it via javascript here in the bottom of it's page:
http://jquerymobile.com/demos/1.0a4.1/docs/forms/forms-selects.html
I've done it. But i don't know if i did it wrong or what. Here is my code :
<script type="text/javascript">
function SelectAll(){
var select=document.getElementById('sfruit');
if (select.options[1].selected == true){
alert('All Selected');
for (x in select.options){
if(x > 1){
if (select.options[x].selected == true){
alert(select.options[x].value+' selected');
RefreshSelect();
select.options[x].selected == false;
}else{
alert(select.options[x].value+' unselected');
}
}
}
}
}
function RefreshSelect(){
var myselect = $("select#sfruit");
myselect[0].selectedIndex = 5;
myselect.selectmenu("refresh");
}
</script>
<select onChange="SelectAll()" data-native-menu="false" id="sfruit" name="sfruit" multiple>
<option>Select Fruit</option>
<option value="all" selected>All</option>
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="grape">Grape</option>
<option value="melon">Melon</option>
</select>
What i actually want is when i select "All" option, other option that have been selected become unselected.
I'll attaching the image if u all still doesn't understand what i mean, later, it's already late here.
Thanks guys. And please help me. .. :)
I think this is what you want
$(window).load(function(){
$("select#sfruit").change(function () {
$("select#sfruit option:selected").each(function (obj) {
if($(this).index()==1){
alert('All Selected');
$("select#sfruit option:selected").removeAttr("selected");
$("select#sfruit option:eq(1)").attr("selected","");
}
});
});
});
<select data-native-menu="false" id="sfruit" name="sfruit" multiple>
<option>Select Fruit</option>
<option value="all" selected>All</option>
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="grape">Grape</option>
<option value="melon">Melon</option>
</select>
Using smarty, take a look at the code below:
<select name="unitSelect" class="uniForm" id="unitSelect" style="width:1250px;" onchange="location.href='{$ABS_MANAGER_URL}/managerEditUnit.php?unit_id={$set[i].id}'; return false">
<option value="0" selected="selected">Select Unit</option>
{section name=i loop=$set}
<option value="{$set[i].id}" >{$set[i].unitName}</option>
{/section}
</select>
What I want, is for the value in the options to load into the select onchange"" call, for the GET variable... I can't figure out how to do this with javascript...any ideas anyone?
Thanks.
UPDATE
It wasn't easy, but between a few of your comments I got one working, thanks all:
<script type="text/javascript">
function viewUnit(value) {
var url = "managerEditUnit.php?unit_id=";
url += value;
document.location.href=url;
}
</script>
Here is an example:
<select onchange="alert(this.options[this.selectedIndex].value)">
<option value="0">Option 1</option>
<option value="1">Option 2</option>
<option value="2">Option 3</option>
</select>
EDIT:
Sorry for the duplicate.
If you want to use it with a function:
function yourfunction(value) {
alert(value);
}
And ofcourse change alert in the above HTML to yourfunction.
You could get the value in the select object by doing this in the onchange event:
onchange="alert(this.options[this.selectedIndex]"
Since you can get that value, then you can dynamically build up your GET request. Some like this:
onchange="document.location.href='somepage.php?id=' this.options[this.selectedIndex];"
jQuery makes it even easier, you can just use:
onchange="alert($(this).val())"
This should do it:
<select onchange="yourfunction(this.options[this.selectedIndex].value);">
I could suggest you to use following for getting the value when select an option from dropdownlist -->
this.value
moving to your javascript means -->
onchange="JavaScript:userDefinedFunction(this.value);"
eg::
select name='state' onchange="JavaScript:userDefinedFunction(this.value);"
I am having a form and I would like to change it's contents based on the selected value of a drop down list. All the following will be used in a PHP file.
It looks like this:
<style type="text/css">
.hide {
display:none;
}
<select>
<option value="" >Please select product below</option>
<option value="pro1">Product 1</option>
<option value="pro2">Product 2</option>
</select>
<div id="pro1" class="hide" >Product 1</div>
<div id="pro2" class="hide" >Product 2</div>
A suggested solution is the following
You can use the slideUp() and slideDown built-in effect.
Or any of the other built-in effects for jQuery. http://api.jquery.com/category/effects/
$(document).ready(function () {
$("#selectMenu").bind("change", function () {
if ($(this).val() == "pro1") {
$("#pro1").slideDown();
$("#pro2").slideUp();
}
else if($(this).val() =="pro2") {
$("#pro2").slideDown();
$("#pro1").slideUp();
}
});
});
HTML
<select id="selectMenu">
<option value="" >Please select product below</option>
<option value="pro1">Product 1</option>
<option value="pro2">Product 2</option>
</select>
My questions are How can I add the slideup/down script AND is there any other way to handle this?
Thank you!
My questions are How can I add the
slideup/down script AND is there any
other way to handle this?
If you make a convention that your <option/> value is the same as the id of the div you want to show, then you could alter your change event to look like this:
$("#selectMenu").bind("change", function() {
$(".hide").slideUp().filter("#" + $(this).val()).slideDown();
});
Example on jsfiddle.