When textbox has any value then how to automatically drop-down option will selected?
For Example :
This is my drop down
<option>pick a color</option>
<option value="red">RED</option>
<option value="blue">BLUE</option>
<option value="others">Green</option>
This is text box :
<input type="text" name="color" id="color" />
Question
If any type value is fill in text box, how to select automatically Green in drop down.
You could attach input event to the input to track the user change on input then if so select the option you want, check example bellow.
Hope this helps.
$('#color').on('input', function() {
if($(this).val()!="")
$('#colors').val("others");
else
$('#colors').val("0");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="colors">
<option value="0">pick a color</option>
<option value="red">RED</option>
<option value="blue">BLUE</option>
<option value="others">Green</option>
</select>
<input type="text" name="color" id="color">
If you're using plain JavaScript, you can try this
<select id="selection">
<option>pick a color</option>
<option value="red">RED</option>
<option value="blue">BLUE</option>
<option value="others">Green</option>
</select>
<input type="text" id="color" oninput="myFunction()">
<script>
function myFunction() {
document.getElementById("selection").value ='others';
}
</script>
Note: I haven't added the code to handle reseting the selection in case there's no text in the textbox
Related
I have the following drop-down menu:
<form action="...">
<select name="fruits" id="my-fruits">
<option value="" disabled selected>Select a fruit</option>
<option value="apple">apple</option>
<option value="orange">orange</option>
<option value="peach">peach</option>
</select>
<select name="animals" id="my-animals">
<option value="" disabled selected>Select an animal</option>
<option value="dog">dog</option>
<option value="cat">cat</option>
<option value="iguana">iguana</option>
></select>
</form>
What I need is when the user changes the selected option in one filed (i.e. on change event), the placeholder to be displayed on the other and vice-versa.
For example, lets say that the user had already selected orange in #my-fruits. Now, when the user changes the selection from dog to cat in #my-animals:
the placeholder "Select a fruit" to be displayed automatically on #my-fruits field, and
then, the <option value="orange"> have its "selected" attribute removed
Ira, try this:
$('#my-fruits')
.add('#my-animals')
.on('change', function () {
$(this).siblings().prop('selectedIndex', 0);
});
Also, remove unnecessary arrow in this line:
></select>
Good luck ;)
$('select').change(function() {
$(this).siblings('select').prop('selectedIndex', 0);
console.log($('option:selected', this).val())
console.log($(this).siblings('select').val())
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form action="...">
<select name="fruits" id="my-fruits">
<option value="" disabled selected>Select a fruit</option>
<option value="apple">apple</option>
<option value="orange">orange</option>
<option value="peach">peach</option>
</select>
<select name="animals" id="my-animals">
<option value="" disabled selected>Select an animal</option>
<option value="dog">dog</option>
<option value="cat">cat</option>
<option value="iguana">iguana</option>
</select>
</form>
Just set the selected option of sibling select to first index
Try
$('#animals').change(function() {
$('#fruits').val("");
});
This question already has answers here:
How to toggle selection of an option in a multi-select with jQuery?
(8 answers)
Closed 6 years ago.
I have multiple select boxes used for filtering data from a database.
For example select box 1:
<select name="team" multiple size="3">
<option value="1">Team 1</option>
<option value="2">Team 2</option>
<option value="3">Team 3</option>
</select>
And select box 2:
<select name="name" multiple size="3">
<option value="John">John</option>
<option value="Mary">Mary</option>
<option value="Ryan">Ryan</option>
</select>
Problem is once i select a value from a field i can't deselect it and i don't want to reset all filters and start allover. I would like to be able to deselect the selected option on second click, for each box ... i.e.: 1st click => select / 2nd click=> deselect.
How is the easiest way to do this?
Thank you for patience!
Try something like this
<select id="select1" name="team" multiple size="3">
<option value="1">Team 1</option>
<option value="2">Team 2</option>
<option value="3">Team 3</option>
</select>
<select id="select2" name="name" multiple size="3">
<option value="John">John</option>
<option value="Mary">Mary</option>
<option value="Ryan">Ryan</option>
</select>
Jquery
$("#select1").change(function(){
$("#select2").val(null);
});
$("#select2").change(function(){
$("#select1").val(null);
});
Try this
$( "select" ).dblclick(function(){
$( this ).val("");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<select name="team" multiple size="3">
<option value="1">Team 1</option>
<option value="2">Team 2</option>
<option value="3">Team 3</option>
</select>
<select name="name" multiple size="3">
<option value="John">John</option>
<option value="Mary">Mary</option>
<option value="Ryan">Ryan</option>
</select>
I have many dropdowns, when I click the button I want it to look up the select option that is selected and alert me the text it says, like 'grape'.
It must use .closest, have tried many variations but cant seem to find it.....
<select name="div0" class="dropdowns">
<option value="orange">orange</option>
<option value="apple">apple</option>
<option value="grape">grape</option>
<option value="peas">peas</option>
</select>
<input type="button" name="mybutton" value="Edit Row">
<select name="div1" class="dropdowns">
<option value="orange">orange</option>
<option value="apple">apple</option>
<option value="grape">grape</option>
<option value="peas">peas</option>
</select>
<input type="button" name="mybutton" value="Edit Row" class="editrowbutton">
JQUERY (Nearest I can get)
$(document).on('click', '.editrowbutton', function() {
var thetext = $(this).closest('select').find('option:selected').text();
alert(thetext);
});
You are missing the class editrowbutton on your buttons in the example.
use .prev to get the previous element from target.
$(document).on('click', '.editrowbutton', function() {
var thetext = $(this).prev().find('option:selected').text();
alert(thetext);
});
http://jsfiddle.net/SeanWessell/wt00c2wu/
.closest looks up the tree at parents. Since the select is not a parent you will not return anything.
If you wanted to search the siblings you can use prev('selector') or next('selector') as well.
https://api.jquery.com/category/traversing/tree-traversal/
You can also use the data-* attribute, preventing DOM position mistakes.
$(function(){
$(document).on("click",'.editrowbutton',function(){
var target = $(this).data("select");
alert($('select[name='+target+'] option:selected').text())
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="div0" class="dropdowns">
<option value="orange">orange</option>
<option value="apple">apple</option>
<option value="grape">grape</option>
<option value="peas">peas</option>
</select>
<input type="button" name="mybutton" data-select="div0" class="editrowbutton" value="Edit Row">
<select name="div1" class="dropdowns">
<option value="orange">orange</option>
<option value="apple">apple</option>
<option value="grape">grape</option>
<option value="peas">peas</option>
</select>
<input type="button" name="mybutton" data-select="div1" class="editrowbutton" value="Edit Row">
I need to show the submit button on many forms on the same page only if one option from a select is selected.
I have:
<form id="1">
<input type="text">
<select>
<option value="">Select one value</option>
<option value="1">value 1</option>
<option value="2">value 2</option>
</select>
<input type="submit">
</form>
and
<form id="2">
<input type="text">
<select>
<option value="">Select one value</option>
<option value="1">value 1</option>
<option value="2">value 2</option>
</select>
<input type="submit">
</form>
so, I need to show the submit button only if an option of the select is selected
Thanks!!!
This a working example with you html http://jsfiddle.net/g188o5eg/
$('select').on('change', function(){
if($(this).val() != ''){
$(this).parent().find('input[type="submit"]').show();
} else {
$(this).parent().find('input[type="submit"]').hide();
}
});
It will work with all forms on your site :)
Try something like this (would work with multiple select boxes (uses the nearest submit):
<form>
<input type="text">
<select class="select">
<option value="">Select one value</option>
<option value="1">value 1</option>
<option value="2">value 2</option>
</select>
<input type="submit" class="submitbutton">
<script type="text/javascript">
$('.submitbutton').hide();
$('.select').click(function() {
$(this).closest('.submitbutton').show();
});
</script>
I have a series of selects that I unfortunately have to inject an option called 'please select' into as the first option. I then want to make the 'please select' in all selects on the page, selected. As I can't change the HTML, this is my only choice.
However, my code seems to be only making the first select's 'please select' selected.
HTML:
<select name="" id="" class="cartDdlOptions">
<option value="1">Some Value</option>
<option value="2">Some Value</option>
<option value="3">Some Value</option>
<option value="4">Some Value</option>
</select>
<select name="" id="" class="cartDdlOptions">
<option value="1">Some Value</option>
<option value="2">Some Value</option>
<option value="3">Some Value</option>
<option value="4">Some Value</option>
</select>
<select name="" id="" class="cartDdlOptions">
<option value="1">Some Value</option>
<option value="2">Some Value</option>
<option value="3">Some Value</option>
<option value="4">Some Value</option>
</select>
jQuery:
$(window).load(function(){
$('.cartDdlOptions').prepend('<option value="" selected>Please Select</option>');
var selectOperator = $(".cartDdlOptions option").eq(0);
$(".cartDdlOptions").each(function(){
if (selectOperator.val() == ""){
console.log(selectOperator);
selectOperator.attr("selected", true);
}
});
});
Working example.
Really can't work this one out. Help would be appreciated.
You can do it that with just two lines instead of writing much code this way:
$(".cartDdlOptions").each(function(){
$(this).prepend('<option value="0" selected>Please Select</option>'); //add please select option
$(this).val("0") // set it as selected
});
If you don't want to set value attribute then you can do as #T.J Cowder pointed:
$(".cartDdlOptions").each(function () {
$(this).prepend('<option value="" selected>Please Select</option>'); //add please select option
$(this).val("") // set it as selected
});
EXAMPLE:
http://jsfiddle.net/cqrs2g8w/