I have this code:
<div>
<label id="hd" for="escol"">text</label> <select name="escol"
class="drop">
<option value="1" class="dr">show</option>
<option value="2" class="dr">hide</option>
</select>
</div>
<div>
<label id ="showHide" for="type"">Tipo de formação</label> <select name="area"
class="drop1">
<option value="1" class="dr">Universidade</option>
<option value="2" class="dr">Politécnico</option>
</select>
</div>
and
<script>
$("#hd").click(function () {
$(".drop1").slideToggle("slow");
});
</script>
How to show the second select if the first select have the first option selected, and hide the second dropdown if the second option of the first dropdown is selected?
First, you can restructure the HTML a wee bit by putting the <select> elements inside the labels. That way you don't have to use the for label attribute.
<div>
<label id="hd">
text
<select name="escol" class="drop">
<option value="1" class="dr">show</option>
<option value="2" class="dr">hide</option>
</select>
</label>
</div>
<div>
<label id="showHide">
Tipo de formação
<select name="area" class="drop1">
<option value="1" class="dr">Universidade</option>
<option value="2" class="dr">Politécnico</option>
</select>
</label>
</div>
Then, use the .change() event:
$('#hd > select').change(function ()
{
$('#showHide > select').toggle(this.selectedIndex === 0);
});
Demo: http://jsfiddle.net/mattball/EaQea/
You can add an on change event handler to the first drop down like this:
$("#escol").change(function(){
if($(this).val() == "1"){
$("#area").show();
}else{
$("#area").hide();
}
});
And change your HTML to this:
<div>
<label id="hd" for="escol">text</label> <select id="escol"
class="drop">
<option value="1" class="dr">show</option>
<option value="2" class="dr">hide</option>
</select>
</div>
<div>
<label id ="showHide" for="type">Tipo de formação</label> <select id="area"
class="drop1">
<option value="1" class="dr">Universidade</option>
<option value="2" class="dr">Politécnico</option>
</select>
</div>
Notice that you have some extra double quotes in your html that I removed and I changed name="area" to id="area" and name="escol" to id="escol".
$("select[name='escol']").change(function () {
$("#showHide").parent()['slide'+((this.value==2)?'Up':'Down')]("slow");
});
Related
I have the select below and I want to pass its selected value based on the option's name (color), inside an input field using jQuery but it doesn't work.
What am I doing wrong?
$(document).ready(function() {
$('#select_color_id option[name="color"]').on('change', function() {
var selectedoption = $('#select_color_id').val();
$('#search-query').val(selectedoption);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div style="margin-bottom:20px;">
<input type="text" id="search-query" class="search-color-field" name="search_query" placeholder="Search your color...">
</div>
<select class="form-control" id="select_color_id">
<option value="white" name="color">White</option>
<option value="black" name="color">Black</option>
<option value="red" name="color">Red</option>
<option value="brown" name="color">Brown</option>
<option value="pink" name="color">Pink</option>
<option value="search-add" name="new-color">Add new color</option>
</select>
First option tag does not have change event. But you can get selected option and check the name to see if it is color or not:
$(document).ready(function() {
$('#select_color_id').on('change', function(e) {
var optionSelected = $(this).find("option:selected")[0];
console.log(optionSelected.getAttribute("name"))
if(optionSelected.getAttribute("name") === "color"){
var selectedoption = $('#select_color_id').val();
$('#search-query').val(selectedoption);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div style="margin-bottom:20px;">
<input type="text" id="search-query" class="search-color-field" name="search_query" placeholder="Search your color...">
</div>
<select class="form-control" id="select_color_id">
<option value="white" name="color">White</option>
<option value="black" name="color">Black</option>
<option value="red" name="color">Red</option>
<option value="brown" name="color">Brown</option>
<option value="pink" name="color">Pink</option>
<option value="search-add" name="new-color">Add new color</option>
</select>
If search-add is always going to be the only thing you don't want to appear then you can just do a check for it, then otherwise set the value of your search-query input field to your selectedoption variable:
$(document).ready(function() {
$('#select_color_id').on('change', function() {
var selectedoption = $('#select_color_id').val();
if (selectedoption == 'search-add') {
return;
}
$('#search-query').val(selectedoption);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div style="margin-bottom:20px;">
<input type="text" id="search-query" class="search-color-field" name="search_query" placeholder="Search your color...">
</div>
<select class="form-control" id="select_color_id">
<option value="white" name="color">White</option>
<option value="black" name="color">Black</option>
<option value="red" name="color">Red</option>
<option value="brown" name="color">Brown</option>
<option value="pink" name="color">Pink</option>
<option value="search-add" name="new-color">Add new color</option>
</select>
I have a select which contains options, I want to be able to resent each of the select to its first value onclick
$('.reset').on('click', function() {
$('food option:first').prop('selected', true);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<select class="food">
<option value="" selected disabled>Select Food</option>
<option value="rice">Rice</option>
<option value="garri">Garri</option>
</select>
<input type="text" class="showfood">
<button class="reset">Reset Select</button>
</div>
<div class="box">
<select class="food">
<option value="" selected disabled>Select Food</option>
<option value="beans">Beans</option>
<option value="pear">pear</option>
</select>
<input type="text" class="showfood">
<button class="reset">Reset Select</button>
</div>
However, what this does is reset only the first select.
Your logic to reset is correct. The issue you have is that you need to find only the option related to the select within the same container as the clicked button. To achieve that you can use closest() and find(), like this:
$('.reset').on('click', function() {
$(this).closest('.box').find('.food option:first').prop('selected', true);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<select class="food">
<option value="" selected disabled>Select Food</option>
<option value="rice">Rice</option>
<option value="garri">Garri</option>
</select>
<input type="text" class="showfood">
<button class="reset">Reset Select</button>
</div>
<div class="box">
<select class="food">
<option value="" selected disabled>Select Food</option>
<option value="beans">Beans</option>
<option value="pear">pear</option>
</select>
<input type="text" class="showfood">
<button class="reset" type="button">Reset Select</button>
</div>
I have 2 selectboxes. What I want to do is autoselect the second selectbox by selecting a value from selectbox1. I can auto populate the values but what I need here is to select option by order regardless of value.
If I select option1 on selectbox1 with value=A, then it should select option1 on selectbox2 with value="1" according to below
<div class="control-group">
<label class="control-label">First Select</label>
<div class="controls">
<select name="firstSELECT" class="select validate[required]">
<option value="A" class="opm">12345</option>
<option value="B" class="opm">23456</option>
<option value="C" class="opm">34567</option>
<option value="D" class="opm">45678</option>
<option value="E" class="opm">56789</option>
</select>
</div>
<label class="control-label">Second Select</label>
<div class="controls">
<select name="secondSELECT" class="select validate[required]">
<option value="1" class="opm">ABCDE</option>
<option value="2" class="opm">BCDEF</option>
<option value="3" class="opm">CDEFG</option>
<option value="4" class="opm">DEFGH</option>
<option value="5" class="opm">EFGHI</option>
</select>
</div>
</div>
I tried a method like javascript using select box to fill other select box but since I need to select according the order of option, not value; I wasn't able to do it since I am very new with Javascript.
Thanks in advance.
This works:
function update() {
var firstSelect = document.getElementsByName("firstSELECT")[0];
var secondSelect = document.getElementsByName("secondSELECT")[0];
var optN;
for (i=0;i<firstSelect.children.length;i++) {
if (firstSelect.children[i].selected) {
secondSelect.children[i].selected = "1";
break;
}
}
}
<div class="control-group">
<label class="control-label">First Select</label>
<div class="controls">
<select name="firstSELECT" class="select validate[required]" oninput="update()">
<option value="A" class="opm">12345</option>
<option value="B" class="opm">23456</option>
<option value="C" class="opm">34567</option>
<option value="D" class="opm">45678</option>
<option value="E" class="opm">56789</option>
</select>
</div>
<label class="control-label">Second Select</label>
<div class="controls">
<select name="secondSELECT" class="select validate[required]">
<option value="1" class="opm">ABCDE</option>
<option value="2" class="opm">BCDEF</option>
<option value="3" class="opm">CDEFG</option>
<option value="4" class="opm">DEFGH</option>
<option value="5" class="opm">EFGHI</option>
</select>
</div>
</div>
We loop trough all the <option> elements in the first <select>, and when we find the selected, we select the <option> with the same index in the second <select>.
Try this:
<div class="control-group">
<label class="control-label">First Select</label>
<div class="controls">
<select name="firstSELECT" id="a" class="select validate[required]" onchange="document.getElementById('b').value=document.getElementById('a').value">
<option value="A" class="opm">12345</option>
<option value="B" class="opm">23456</option>
<option value="C" class="opm">34567</option>
<option value="D" class="opm">45678</option>
<option value="E" class="opm">56789</option>
</select>
</div>
<label class="control-label">Second Select</label>
<div class="controls">
<select name="secondSELECT" id="b" class="select validate[required]">
<option value="A" class="opm">ABCDE</option>
<option value="B" class="opm">BCDEF</option>
<option value="C" class="opm">CDEFG</option>
<option value="D" class="opm">DEFGH</option>
<option value="E" class="opm">EFGHI</option>
</select>
</div>
</div>
Here's the jQuery way of doing it:
$(".selectFirst").change(function(e) {
var selectedOption = $("option:selected", this);
var idx = $(this).children().index(selectedOption)
var secChildIdx = $(".selectSecond").children()[idx];
$(".selectSecond").find(":selected").removeAttr('selected');
$(secChildIdx).attr("selected", "selected");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="control-group">
<label class="control-label">First Select</label>
<div class="controls">
<select name="firstSELECT" class="selectFirst select validate[required]">
<option value="A" class="opm">12345</option>
<option value="B" class="opm">23456</option>
<option value="C" class="opm">34567</option>
<option value="D" class="opm">45678</option>
<option value="E" class="opm">56789</option>
</select>
</div>
<label class="control-label">Second Select</label>
<div class="controls">
<select name="secondSELECT" class="selectSecond select validate[required]">
<option value="1" class="opm">ABCDE</option>
<option value="2" class="opm">BCDEF</option>
<option value="3" class="opm">CDEFG</option>
<option value="4" class="opm">DEFGH</option>
<option value="5" class="opm">EFGHI</option>
</select>
</div>
</div>
I am trying to get text and selected value from checked radio button and put it into variable. Trying to get something like "Is published" or if is other radio checked to be like "Is not In Review". This needs to be plain javascript - no jquery or any other framework.
<form>
<div class="filter-option">
<input type="radio" id="status" name="status" checked="checked"/>
<label for="status">Is</label>
<div class="searchFilter">
<select class="selectpicker" title="" data-size="false" multiple
data-live-search="true">
<option value="all">All</option>
<option value="published">Published</option>
<option value="draft">Draft</option>
<option value="in-review">In Review</option>
<option value="deleted">Deleted</option>
</select>
</div>
</div>
<div class="filter-option">
<input type="radio" id="is_not" name="status"/>
<label for="is_not">Is not</label>
<div class="searchFilter">
<select class="selectpicker" title="" data-size="false" multiple data-
live-search="true">
<option value="all">All</option>
<option value="published">Published</option>
<option value="draft">Draft</option>
<option value="in-review">In Review</option>
<option value="deleted">Deleted</option>
</select>
</div>
</div>
<div class="filter-option">
<input type="radio" id="contain" name="author"/>
<label for="contain">Contain</label>
<div class="searchFilter">
<input type="text" class="simpleSearch">
</div>
</div>
</form>
You give the select element an id, then use document.getElementById(id).value.
This should return the value of the selected option, which you can then use any way you want.
Using .text instead gives you the text shown to the user in the list (in this example they are the same).
I was wondering if it's possible to submit a form (dropdown list for the input) when the selected value selected="selected" is clicked. I can't seem to get it to work.
My code:
<form method="post" name='myform' id="box" action="javascript:alert('submitted')" onsubmit="if(this.f.value == -1){return false;}">
<fieldset class="box_fieldset">
<select name="f" id="f3" onchange="if(this.options[this.selectedIndex].value != -1){ document.forms['myform'].submit() }">
<option value="-1">-- select --</option>
<option value="1" >one</option>
<option value="2" selected="selected" >two</option>
<option value="3" >three</option>
</select>
</fieldset>
</form>
With the corresponding jsFiddle
As you can see, it's not possible to 're-submit' option 2 because it is already selected
(alert doesn't get triggered).
Is there a way to do this?
Well, use another event trigger.
window.onload should be appropriately.
jsFiddle link
when you are using onchange event you can't handle default values, like the one you chose (two);
<option value="-1" selected>-- select --</option>
<option value="1" >one</option>
<option value="2" >two</option>
<option value="3" >three</option>
<html>
<head>
</head>
<body>
<select id="slct">
<option value="1" onclick="clicked(this)">one</option>
<option value="2" onclick="clicked(this)">two</option>
<option value="3" onclick="clicked(this)">three</option>
</select>
<script>
function clicked(e){
var xml = new XMLHttpRequest();
xml.open("GET",""+this.value,false);
xml.send();
}
</script>
</body>
use such a trick to handle your requests