In laravel i need some help, i am new for laravel,
when select the option , then change the div if any one this
here is code please check
<select name="question_type_id" class="div-toggle" data-target=".my-info-1">
<option value="" disabled selected>Choose Question Type</option>
#foreach($question_type as $questy)
<option value="{{$questy->id}}">{{$questy->question_type_name}}</option>
#endforeach
</select>
This is db structure which is store the options in the image link please check
http://mrshineonline.com/images/database.png
div for changing is
<div class="1 box">
here multiple choice options
</div>
<div class="2 box">
Here fill in the blank options
</div>
This is with jquery. You can do it with vanilla js also but you provided no info
<select name="question_type_id" class="div-toggle" data-target=".my-info-1">
<option value="" disabled selected>Choose Question Type</option>
#foreach($question_type as $questy)
<option value="{{$questy->id}}" >{{$questy->question_type_name}}</option>
#endforeach
</select>
#foreach($question_type as $questy)
<div class="toggles-{{ $questy->id }}" class="hidden">
...
</div>
#endforeach
<script>
(function() {
var els = $("div[class^='toggles-']");
$('.div-toggle').change(function(event) {
els.hide();
$('.toggles-' + event.target.value).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);
I have 2 HTML drop down menus.
<div class="bar-option">
<label>Filter:</label>
<form>
<select name="retreat_locations" onchange="filterRetreats(this.value, 'count(reviews.retreat_id)')">
<option value="alllocations" selected="selected">All Locations</option>
<?php foreach ($this->locations as $location) {?>
<option value="<?=htmlentities($location->retreat_location);?>">
<?=htmlentities($location->retreat_location);?> </option>
<?php }?>
</select>
</form>
</div>
<div class="bar-option">
<label>Sort by:</label>
<select onchange="filterRetreats('alllocations', this.value)">
<option selected='selected' value='retreat_number_of_reviews'>Popularity</option>
<option value='retreat_founded_in'>Age</option>
<option value='total_review_cost'>Cost</option>
</select>
</div>
As you can see from the above, the second select uses the static value 'alllocations' as the first parameter for the onchange function.
How can I replace this static value with the selected option of the first dropdown (retreat_locations)?
I tried retreat_locations.value but it didn't work.
Any help appreciated.
You can use:
document.querySelector('[name=retreat_locations]').value
Your code will become:
filterRetreats(document.querySelector('[name=retreat_locations]').value, this.value)
Demo:
function filterRetreats(value1, value2) {
console.log(value1, value2);
}
<div class="bar-option">
<label>Filter:</label>
<form>
<select name="retreat_locations" onchange="filterRetreats(this.value, 'count(reviews.retreat_id)')">
<option value="alllocations" selected="selected">All Locations</option>
<option value="2">2</option>
</select>
</form>
</div>
<div class="bar-option">
<label>Sort by:</label>
<select onchange="filterRetreats(document.querySelector('[name=retreat_locations]').value, this.value)">
<option selected='selected' value='retreat_number_of_reviews'>Popularity</option>
<option value='retreat_founded_in'>Age</option>
<option value='total_review_cost'>Cost</option>
</select>
</div>
Other -old school- option is to add an id tag to the first select, e.g. id="retreat_locations" and use document.getElementById('retreat_locations').value.
I have built this simple dropDown list:
Here's its html definition:
<select class="form-control" id='0' (change)="retrieveValue($event.target)">
<option id='0'>{{ genericSpecific[params.node.id][0] }}</option>
<option id='1'>{{ genericSpecific[params.node.id][1] }}</option>
</select>
For retrieving the value:
updateChosenValue(event) {
console.log(event.value)}
But, I couldn't find a way to retrieve the id.
Any help?
Thank you!
Change HTML
<select class="form-control" id='0' (change)="retrieveValue($event)">
<option id='0'>A</option>
<option id='1'>B</option>
</select>
Update ts
retrieveValue(event) {
const selectEl = event.target;
const val = selectEl.options[selectEl.selectedIndex].getAttribute('id');
console.log(val)
}
https://stackblitz.com/edit/angular-yfb45a
Try this. this may help you to understand the logic.. but still you'll have to make this compatible to your angular code.
<select onchange="alert(this.options[this.selectedIndex].getAttribute('id'));" name="myname" class="myclass">
<option id="1" value="hi">click1</option>
<option id="2" value="hello">click2</option>
</select>
try this
<select class="form-control" id='0' (change)="retrieveValue($event.target)">
<option id='0' value='0'>{{ genericSpecific[params.node.id][0] }}</option>
<option id='1' value='1'>{{ genericSpecific[params.node.id][1] }}</option>
</select>
https://stackblitz.com/edit/angular-vo9cuj
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>
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