Trying to make a dependent select box.
I have two models, Areas and buildings, one area have many buildings, so in that case the parent select box will be (Areas) and the child is (Buildings).
On my php page i query all the areas row in parent select box , and query for all buildings in child select box.
First: The Parent select box (Areas):-
<select id="buildgs" onchange="showBuildings()">
#foreach ($areas as $a)
<option value="{{$a->name}}">{{$a->name}}</option>
#endforeach
</select>
The above code result :-
<select id="buildgs" " onchange="showBuildings()">
<option value="A">A</option>
<option value="B">B</option>
</select>
Second: The child select (Buildings):-
<select id="building" >
<option value=""></option>
#foreach ($areas as $a)
#foreach($a->buildings as $b)
<option style="display: none" id="{{$a->name}}" value="{{$b->id}}">
#if($b->symbol)
{{$b->symbol}} ({{$b->name}})
#else
{{$b->name}}
#endif
</option>
#endforeach
#endforeach
</select>
The above code result :-
<select id="building">
<option style="display: none" id="A" value="58">
STFA Land Area Workshop
</option>
<option style="display: none" id="A" value="121">
Temporary offices
</option>
<option style="display: none" id="B" value="60">
TC (Training Center)
</option>
<option style="display: none" id="B" value="110">
STFA Onshore Cabins
</option>
<option style="display: none" id="B" value="111">
STFA Onshore WS
</option>
</select>
Jquery and Javascript code:-
<script>
function showBuildings(){
//getting the value from Parent (Areas)
var x = $("#buildgs").val();
//This one just for testing and it's working
document.getElementById('testt').innerHTML='this changed to '+ x;
//This supposed to change all child <option>.style with x id but it not doing any thing !!!!!
document.getElementById(x).style.display='display';
}
</script>
First of all, The id property must be unique, replace them with class.
Change this line:
<option style="display: none" id="{{$a->name}}" value="{{$b->id}}">
To:
<option style="display: none" class="{{$a->name}}" value="{{$b->id}}">
And change this line:
document.getElementById(x).style.display='display';
To:
var results = document.getElementsByClassName(x);
for(var i = 0; i < results.length; i++) {
results[i].style.display='display';
}
UPDATE
I see that you use jQuery to retrieve the value of the select box, here is a clean method with less code to achieve what you want:
<select id="buildgs" onchange="showBuildings(this.value)">
Your new function:
<script>
function showBuildings(val){
$('#building option').not('.'+val).hide(); // Don't forget this!
$('#building option.' + val).show();
}
</script>
Related
I'm using this plugin to have a Select tag with checkbox and search at the same time
https://www.jqueryscript.net/form/jQuery-Plugin-For-Seachable-Option-List-with-Checkboxes.html
Currently I have this working code for sol.js
<label for="demoSOL" class="svs-small"><small>Task List</small></label>
<select id="demoSOL" name="myTask" class="mdb-select multi-sol-svs"
multiple="multiple">
<optgroup label="Task List" title="Opiton Group 1">
#if(count($task_record))
#foreach($task_record as $field)
<option title="Subgroup 1" value="{{$field->taskCode}}">
{{$field->task_title}}</option>
#endforeach
#else
<option value="" title="Subgroup 1">No record found..</option>
#endif
</optgroup>
</select>
JavaScript
$('#demoSOL').searchableOptionList();
How can I get the values of the select ? in javascript when the user selects some checkboxes inside of the select?
Found my answer
var taskData = [];
$("input:checkbox[name=myTask]:checked").each(function() {
taskData.push($(this).val());
});
alert(taskData);
Good Day! I already made my code show the appropriate dropdown as per the selected value on the first dropdown I have my code like this:
First Dropdown:
<select size="1" id="parent" class=" validate['required']" title="" type="select" name="style" >
<option value="">-Choose-</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
When I chose any of this secondd dropdown will show for example when i choose "A" this next dropdown will show
<div id="A" class="style-sub-1" style="display: none;" name="stylesub1" >
<label>A</label>
<select id="childA">
<option value="">-Choose-</option>
<option value="Aa">Aa </option>
<option value="Ab">Ab </option>
<option value="Ac">Ac</option>
</select>
</div>
And then lastly when I choose again for example Aa, the third dropdown will be shown. This is the third dropdown
<div id="Aa" class="style-sub-2" style="display: none;" name="stylesub2" >
<label>Aa:</label>
<select >
<option value="">-Choose-</option>
<option value="Aaa">Aaa</option>
<option value="Abb">Abb </option>
<option value="Acc">Acc</option>
</select>
Now, my problem is for example after I selected all these then decided to select another value from the first dropdown, for example B, the third dropdown which is Aaa is still shown. I need to hide this when I selected a new value to avoid confusion. How can I do that? This is my Javascript code:
<script>
$("#parent").change ( function () {
var targID = $(this).find(":selected").val()
$("div.style-sub-1").hide ();
$('#' + targID).show ();
} )
$("#childA").change ( function () {
var targID = $(this).find(":selected").val();
$("div.style-sub-2").hide ();
$('#' + targID).show ();
} )
</script>
u can apply onchange function oh ur dropdowns as if first dropdown changes show second dropdown and same goes for second dropdown as if some one selects a value onlu then third dropdown will show
I have a dropdown with two tiers. I want to get the option value from the item selected from the second dropdown list.
I have figured out how to do this for the first list, but I want to be able to grab the value for -any- list. In my jsfiddle, you'll see there's a value in console.log for any of the items in the Pie list when you click on them, but not for any of the items in the Trees or Cars lists when they're clicked.
I thought I could just give all of the selection lists the same ID, but apparently not. Any suggestions? I've done some searching, but haven't found what I'm looking for. I'm using D3 and jQuery already, so those are good, but plain javascript is also fine. Thanks!
jsfiddle is here.
<div class="ccms_form_element cfdiv_custom" id="indSelectors">
<label>Type:</label>
<select size="1" id="dropStyle" class=" validate['required']" title="" type="select" name="style">
<option value="">-Select-</option>
<option value="Pies">Pies</option>
<option value="Trees">Trees</option>
<option value="Cars">Cars</option>
</select>
<div class="clear"></div>
<div id="error-message-style"></div>
</div>
<div id="Pies" class="style-sub-1" style="display: none;" name="stylesub1">
<label>Pies</label>
<select id="inds">
<option value="">- Select -</option>
<option value="28">Apple</option>
<option value="3">Cherry</option>
<option value="44">Pumpkin</option>
</select>
</div>
<div id="Trees" class="style-sub-1" style="display: none;" name="stylesub1">
<label>Trees</label>
<select id="inds">
<option value="">- Select -</option>
<option value="38">Maple</option>
<option value="11">Oak</option>
<option value="14">Birch</option>
</select>
</div>
<div id="Cars" class="style-sub-1" style="display: none;" name="stylesub1">
<label>Cars</label>
<select id="inds">
<option value="">- Select -</option>
<option value="39">Mazda</option>
<option value="62">Ford</option>
<option value="25">Toyota</option>
</select>
</div>
<div class="clear"></div><div id="error-message-style-sub-1"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$("#dropStyle").change(function () {
var targID = $(this).val();
$("div.style-sub-1").hide();
$('#' + targID).show();
})
d3.select('#inds')
.on("change", function () {
var sect = document.getElementById("inds");
var section = sect.options[sect.selectedIndex].value;
console.log("section:", section);
// do other stuff with the section name
});
</script>
Element IDs should be unique within the entire document and it is not a good practice to have same id for multiple elements.
what does document.getElementById("inds") or $("#inds") return? You will get the first element always.
Rather, use a class. Just change id="inds" to class="inds" and update code like below.
$('.inds')
.on("change", function () {
var section = $(this).val();
console.log("section:", section);
// do other stuff with the section name
});
Updated Fiddle
Try this jQuery Plugin
https://code.google.com/p/jquery-option-tree/
Demonstration:
http://kotowicz.net/jquery-option-tree/demo/demo.html
I have question where you need to find pairs of words in Russian and English
<div class="form-group" id="question4">
<label for="q4FirstSelectEN">4</label>
<div class="row">
<div class="col-lg-offset-2 col-lg-2 q4EN">
<select name="firstSelectEn" id="q4FirstSelectEN">
<option disabled selected style="display: none" value=""></option>
<option value="red">red</option>
<option value="green">green</option>
<option value="purple">purple</option>
</select>
<select class="top-buffer" name="secondSelectEn" id="q4SecondSelectEN">
<option disabled selected style="display: none" value=""></option>
<option value="red">red</option>
<option value="green">green</option>
<option value="purple">purple</option>
</select>
<select class="top-buffer" name="secondSelectEn" id="q4ThirdSelectEN">
<option disabled selected style="display: none" value=""></option>
<option value="red">red</option>
<option value="green">green</option>
<option value="purple">purple</option>
</select>
</div>
<div class="col-lg-2 q4RU">
<select name="firstSelectRu" id="q4FirstSelectRu">
<option disabled selected style="display: none" value=""></option>
<option value="red">красный</option>
<option value="green">зелёный</option>
<option value="purple">фиолетовый</option>
</select>
<select class="top-buffer" name="firstSelectRu" id="q4SecondSelectRu">
<option disabled selected style="display: none" value=""></option>
<option value="red">красный</option>
<option value="green">зелёный</option>
<option value="purple">фиолетовый</option>
</select>
<select class="top-buffer" name="firstSelectRu" id="q4ThirdSelectRU">
<option disabled selected style="display: none" value=""></option>
<option value="red">красный</option>
<option value="green">зелёный</option>
<option value="purple">фиолетовый</option>
</select>
</div>
</div>
</div>
When user selects for example 'red' in (select) inside (div class='q4EN') in all remaining selects in this (div class=q4EN) selected 'red' option become nonSelectable
(nonSelectable is class in css with display:none)
When user change decision and select 'green' instead of 'red' in first (select) red became available in rest selects and green become nonSelectable
When all 3 select have their value user can't change anything
My js for this is not working and I out of ideas
$(".q4EN").find("select").change(function () {
$(".q4EN").find("select")
.not(this)
.find("option:selected")
.addClass("nonSelectable");
});
I believe the problem is order of operations.
$(".q4EN").find("select").change(function () {
$(".q4EN").find("select") //Finds all select lists
.not(this) //Finds all except the one just changed
.find("option:selected") //Finds selected of all except the one just changed
.addClass("nonSelectable"); //Wont do anything because nothing was selected
});
Try the following:
$(".q4EN").find("select").change(function() {UpdateOptions();});
function UpdateOptions(){
var ss = $(".q4EN").find("select");
ss.find('option').prop("disabled", false); //Enable all before disabling selected
ss.each(function () {
var s = $(this).val();
if(s != undefined && s != "") {
ss.find("option[value=" + s + "]").prop("disabled", true);
}
});
}
This is an alternate way to achieve what you need. It basically iterate through every select element and find the corresponding option and disables it.
$('select').find("option").addClass("selectable");
$('select').on("change",function()
{
// $(this).find("option").prop("disabled",false); // uncomment this if you wish to reset the disabled selection
var $thisId = this.id;
var $selectedOption = $(this).find("option:selected").val();
$('select').each(function()
{
if(this.id !== $thisId)
{
// $(this).find("option").removeClass("non-selectable").addClass("selectable"); // uncomment this if you wish to reset the disabled selection
$(this).find("option[value=" + $selectedOption + "]").prop("disabled",true).addClass("non-selectable").removeClass("selectable");
}
});
})
https://fiddle.jshell.net/a2n234eq/4/
To target a specific group ( like EN and RU ) , change $('select') to $('.q4EN select')
I'm trying to update the value of a select input when I change the value of another select input. I cannot get anything to happen on the page and want to make sure I don't have a syntax error or some other dumb thing in this code.
<div class="group">
<div class="inputs types">
<strong style="font-size:13px;">Category:</strong>
<select name="id" id="ctlJob">
<option value="1">Automotive</option>
<option value="2">Business 2 Business</option>
<option value="3">Computers</option>
<option value="4">Education</option>
<option value="5">Entertainment & The Arts</option>
<option value="6">Food & Dining</option>
<option value="7">Government & Community</option>
<option value="8">Health & Beauty</option>
<option value="9">Home & Garden</option>
<option value="10">Legal & Financial Services</option>
<option value="11">Professional Services</option>
<option value="12">Real Estate</option>
<option value="13">Recreation & Sports</option>
<option value="14">Retail Shopping</option>
<option value="15">Travel & Lodging</option>
</select>
<select name="type" id="ctlPerson"></select>
</div>
</div>
<script>
$(function() {
$("#ctlJob").change(function() {
//Get the current value of the select
var val = $(this).val();
$('#ctlPerson').html('<option value="123">ascd</option>');
});
});
</script>
Try using append instead:
$(function() {
$("#ctlJob").change(function() {
//Get the current value of the select
var val = $(this).val();
var ctl = $('#ctlPerson').append('<option value="123">'+val+'</option>')[0].options;
ctl.selectedIndex = ctl.length-1;
});
});
http://jsfiddle.net/J69q8/
I think you also need to set the 'selected' property. Add
$('#ctlPerson option[value="123"]').attr('selected', 'selected');
to the end of the script. You are currently adding the option to the select list, but are not changing the select list to show it.
<div id="test">
<select name="sel" id="sel">
<option name="1" id="1" value="1">Automotive</option>
<option name="2" id="1 value="2">Business 2 Business</option>
<option name="3" id="1 value="3">Computers</option>
</select>
<select name="sel2" id="sel2"></select>
</div>
<script>
$("#sel").change(function() {
var val = $(this).val();
$('#sel2').html('<option value="1">NEW</option>');
)};
</script>
this works fine for what you need to do.
it's something like what you have