Develop Reference

On Laravel, when select option then change the div on laravel

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>

How do I retrieve the id of the selected option from a bootstrap dropDown list?

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

creating simple dependent jquery select box not working

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>

Get Checked Only in <Select multiple>

I am trying to get only the checked names in a list of names. Here is my code model:
<select ng-model="selectTopic" ng-change="changedTopic(selectTopic)" ng-options="option as option for option in topics">>
<option value="" disabled>Select a Subject</option>
</select>
<select ng-model="selectDept" ng-change="changedDepartment(selectDept)" ng-options="option as option for option in department">
<option value="" disabled>Select a Department</option>
</select>
<select ng-model="selectUser" ng-options="option as option for option in users" multiple="multiple">
<option value="" disabled>Select a User</option>
</select>
I want to get the selected topic, department, and users. I am currently using: console.log($scope.topics + $scope.departments + $scope.users) but it returns everything. I just want to return the selected items.
Can anyone help me out?

You have to print the ng-models , not the arrays:
console.log($scope.selectTopic);
console.log($scope.selectDept);
console.log($scope.selectUser);
Hope it helps =)

use one object for the model in your form , then you have all the user input in that one object which makes it simple to send to server or to reset form
$scope.userInput={}
<select ng-model="userInput.selectTopic" ng-change="changedTopic(userInput.selectTopic)" ng-options='...'>
<select ng-model="userInput.selectDept" ng-change="changedDepartment(userInput.selectDept)" ng-options='...'>
to see this working put the following in your view temporarily
<pre>{{userInput|json}}</pre>

How to set the value of multiple dropdown selectors based on the value of another dropdown selector on change?

EDIT: post the question and magically it starts working :/ Maybe because I removed the alert?
So I have a dropdown selector that is supposed to represent the default for a set of dropdown selectors that make up a country list.
Here is one of the many code permutations I tried:
$("#edit-ip-ban-setdefault").change(function () {
var selected = this.selectedIndex
$(".form-type-select").each(function() {
$('.form-select').attr('selectedIndex', selected);
$(".form-select").val(selected).change();
});
});
Here is the relevant HTML for the default dropdown:
<select class="form-select valid" name="ip_ban_setdefault" id="edit-ip-ban-setdefault" selectedindex="1">
<option value="0"></option>
<option value="1"> Read Only </option>
<option selected="selected" value="2"> Complete Ban </option>
</select>
And here is the HTML for one of the many dropdowns I wish to have updated on change:
<div class="form-item form-type-select form-item-ip-ban-AF">
<select class="form-select valid" id="edit-ip-ban-af" name="ip_ban_AF">
<option selected="selected" value="0"></option>
<option value="1">Read Only</option>
<option value="2">Complete Ban</option>
</select>
</div>
I'm using jQuery 1.7, but ideally the solution would work for 1.5 to 1.10.