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.
Related
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>
I would like to know how you could add a help symbol beside a disabled option in a dropdown in html, if possible. I would like it so that when you click on the symbol it then tells you why that option has been disabled. Something similar to the dropdown below.
This is the basic code I have for the dropdown right now.
<select name="description" rows="4" class="form-control">
<option value="RhinoTab"><?php echo _l('estimate_table_option1_1'); ?></option>
<option value="RTi"><?php echo _l('estimate_table_option1_2'); ?></option>
<option value="Magical Shit" disabled>Magical Shit</option>
</select>
I ended up finding an example I was able to use as a work around to get my project working. Instead of having an icon it is when you click on the "disabled" option but it will do something close enough to what I was looking for.
$(function(){
var options_sel_idx = 0;
$("#options").on("change", this, function(event) {
if($(this.options[this.selectedIndex]).hasClass("disabled")) {
alert("a");
this.selectedIndex = options_sel_idx;
} else {
options_sel_idx = this.selectedIndex;
}
});
});
<style type="text/css">
.disabled {color:#808080;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="options" id="options">
<option value="">Select</option>
<option value="1">Options 1</option>
<option value="0" class="disabled">Options 2</option>
<option value="0" class="disabled">Options 3</option>
<option value="0" class="disabled">Options 4</option>
</select>
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 am stuck on a problem where I want to remove all the list that fall after selected list.
I have created JS Fiddle here but it doesn't work. For example, if I select item from first drop-down then next two should removed, or if I select from second drop-down then third should be removed.
HTML
<div id='levels'>
<select id="level" class="parent" name="data[level][]">
<option value="1">1</option>
<option value="2">2</option>
</select>
<select id="level" class="parent" name="data[level][]">
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="level" class="parent" name="data[level][]">
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>
Javascript
$("#levels").on('change', function() {
$(this).nextAll().remove();
});
I want to achieve this without assigning different class names or div names to each list.
Cakephp Code
Master File
<script type="text/javascript">
$(document).ready(function() {
$("select").on('change', function() {
$(this).nextAll('select').remove();
$("<div>").load('/dashboard/details/show_levels',function() {
$("#levels").append($(this).html());
});
})
<div id=levels>
<?php echo $form->input('level',array('options'=>$level,'type'=>'select','scroabble'=>true,'multiple'=>true, 'class'=>'parent')); ?>
</div>
});
show_levels
<?php
$abc=array('a','b','c','d');
echo $form->input('level',array('options'=>$abc,'type'=>'select','scroabble'=>true,'multiple'=>true, 'class'=>'parent')); ?>
Update:
Follwing solution worked for me
Replaced
$(this).nextAll('select').remove();
with
$(this).parents().nextUntil().remove();
Not sure how it worked, and whats the difference between two.
try this
$("select").on('change', function() {
$(this).nextAll('select').remove();
});
fiddle
I'm not sure you want to remove them, as you said "hide", but to use change for your scenario, you can use something like:
$(document).ready(function () {
$("#levels").on("change", ".parent", function () {
$(this).nextAll().hide();
});
});
By the way, your <select> elements need to have unique id attributes, not all have "level".
Something that makes more sense to me, is something like this:
http://jsfiddle.net/HRh2d/
Follwing solution worked for me
Replaced
$(this).nextAll('select').remove();
with
$(this).parents().nextUntil().remove();
Not sure how it worked, and whats the difference between two.
Try .siblings() instead of nextAll
Also your selects should have unique IDs
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);"