function run(event) {
console.log(document.getElementById("user").label);
var lable=event.target.options[event.target.selectedIndex].parentNode.label;
if(lable == 'user'){
document.getElementById("copy").value = "user";
} else if (lable == 'warehouse') {
document.getElementById("copy").value = "warehouse";
} else if (lable == 'dollhouse') {
document.getElementById("copy").value = "dollhouse";
}
}
<form>
<select name="sel" id="sel" onchange="run(event)">
<option selected disabled>Wybierz...</option>
<optgroup id="user" value="user" label="user">
<option value="1">michal</option>
<option value="2">mateusz</option>
</optgroup>
<optgroup id="warehouse" value="warehouse" label="warehouse">
<option value="1">kosz</option>
<option value="2">zaginione</option>
</optgroup>
<optgroup id="dollhouse" value="dollhouse" label="dollhouse">
<option value="1">muiy</option>
<option value="2">goey</option>
</optgroup>
</select>
</form>
<input type="text" name="copy" id="copy">
Need helping getting this to work in IE11, works fine in chrome. Getting 'Unable to get property 'options' of undefined or null reference'
<meta http-equiv="X-UA-Compatible" content="IE=8" />
may this will help or for further you can check this Question and Answers.
SCRIPT5007: Unable to get property 'value' of undefined or null reference
Related
I am working in multiple dropdown menu. I have created an array from php and it looks like this:
https://api.myjson.com/bins/1emzic
Now from this json I want to display 4 dropdown menu.
In the first drop down I need to display
"FS A", "FS MT" and "FS OTHER"
Based on the first selection I need to display its related data in second third and fourth and so on as I add in my data.
This is what I need to bind
<select [(ngModel)]="first" id="first">
<option value="" disabled selected>select a category</option>
<option *ngFor="let item of first_list" [value]="item.category">{{item.category}}</option>
</select>
<br>
<select [(ngModel)]="second" id="second">
<option value="" disabled selected>select a category</option>
<option *ngFor="let item of first_list" [value]="item.category">{{item.category}}</option>
</select>
<br>
<select [(ngModel)]="third" id="third">
<option value="" disabled selected>select a category</option>
<option *ngFor="let item of first_list" [value]="item.category">{{item.category}}</option>
</select>
<br>
<select [(ngModel)]="four" id="four">
<option value="" disabled selected>select a category</option>
<option *ngFor="let item of first_list" [value]="item.category">{{item.category}}</option>
</select>
Here is my json data
{"FS A":{"BKK":{"BKK PULL":{"BKK SR1":[]},"BKK PUSH":{"BKK BCDE1":[],"BKK BAKE SE1":[]}},"RSM2":{"CHIANGMAI":{"CMI WS SE1":[],"CMI WS SE2":[]},"NORTH":{"NO1 SE1":[],"NO2 SEPLUS1":[],"NO3 SE1":[]},"ASM HOTEL BKK":{"BKK HO 5STARS1":[],"BKK HO SR1":[],"BKK HO SR2":[],"BKK HO SR3":[]}}},"FS MT":{"FSR1":{"FSA1":{"FS MAKRO":[]}},"FSR2":{"FSA2":{"FS FOODLAND":[],"FS GAS STATION":[],"FS VILLA MARKET JP":[],"SIAM FOODSERVICE":[]}},"FS LOCAL EXP":{"FS LOCAL EXP BKK":{"FS LOCAL EXP BKK":[]},"FS LOCAL EXP CD":{"FS LOCAL EXP CD":[]},"FS LOCAL EXP MM":{"FS LOCAL EXP MM":[]}}},"FS OTHER":{"FS OTHER":{"FS OTHER":{"FS OTHER":[]}}}}
Can anybody help me in this?
Here I am working:
https://stackblitz.com/edit/angular-dsylxi
You need to define the dependency on each other and based on that you can fill the models and its options. I will go for generic solution which can be applied with one function and works for all the drop-downs.
This are the model variables you need
wholeList:any = [];
first:any = [];
second:any = [];
third:any = [];
four:any = [];
firstModel = ''
secondModel = ''
thirdModel = ''
fourModel = ''
Then first you fill the first dropdown
this.testService.get_data().subscribe(
res => {
this.wholeList = res;
this.first = Object.keys(this.wholeList).map(a=> a);
console.log("res", this.first);
},
err => {
console.log(err);
}
)
Then in the view you need to fire a dependency which should look like this, note that I am defining dependency ChangeDropdown(this.wholeList[firstModel],'second')"
<select [(ngModel)]="firstModel" id="first" (ngModelChange)="ChangeDropdown(this.wholeList[firstModel],'second')">
<option value="" disabled selected>select a category</option>
<option *ngFor="let item of first" [value]="item">{{item}}</option>
</select>
<br>
<select [(ngModel)]="secondModel" id="second" (ngModelChange)="ChangeDropdown(this.wholeList[firstModel][secondModel],'third')">
<option value="" disabled selected>select a category</option>
<option *ngFor="let item of second" [value]="item">{{item}}</option>
</select>
<br>
<select [(ngModel)]="thirdModel" id="third" (ngModelChange)="ChangeDropdown(this.wholeList[firstModel][secondModel][thirdModel],'four')">
<option value="" disabled selected>select a category</option>
<option *ngFor="let item of third" [value]="item">{{item}}</option>
</select>
<br>
<select [(ngModel)]="fourModel" id="four">
<option value="" disabled selected>select a category</option>
<option *ngFor="let item of four" [value]="item">{{item}}</option>
</select>
and finally one common function which will update the models
ChangeDropdown = (value,dropdownName) =>{
this[dropdownName] = Object.keys(value).map(a=>{
return a;
})
}
Demo
Help I want to get value from a multiple select dropdown from a form to a controller.
Here's my form:
<select multiple="multiple" id="form-field-select-4" class="form-control search-select" name="tim_teknis">
<option value=""> </option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
</select>
And here's my controller:
$tim_teknis = $_POST['tim_teknis'];
It turned out to be showed like this: "tim_teknis" not the value of the dropdown. I hope anyone could understand what I mean. Thank you!
You have to implode the values before insert
May be your form not method is 'POST' , so "tim_teknis" not the value of the dropdown.
Solution:
<form action="submit_form.php" method="POST"><select multiple="multiple" id="form-field-select-4" class="form-control search-select" name="tim_teknis[]"><option value=""> </option><option value="AL">Alabama</option><option value="AK">Alaska</option></select></form><?php if (!empty($_POST['tim_teknis'])) {var_dump($_POST['tim_teknis']);}?>
Result after submit form:
array(2) { [0]=> string(2) "AL" [1]=> string(2) "AK" }
I want to disable and enable a select, using angular based on a condition.
<select [disabled]="!isContinentSelected" class="form-control" formControlName="country">
<option value="">Select Your Country</option>
<option *ngFor="let country of countries" value="{{country.id}}">{{country.name}}</option>
</select>
isContinentSelected returns true or false. But the is always enable even the condition is false. Im using Angular 5. How can I achieve this?
<select [attr.disabled]="isContinentSelected ? '': null" class="form-control" formControlName="country">
<option value="">Select Your Country</option>
<option *ngFor="let country of countries" value="{{country.id}}">{{country.name}}</option>
</select>
Please try with this code.
This works in my case.
I want to set values as selected at initial loading of my page but I'm not able to set them.
Here is my HTML markup:
<select multiple id="access_rights">
<option value="default" disabled selected>Choose your options</option>
<option value="create">Create</option>
<option value="read">Read</option>
<option value="update">Update</option>
<option value="delete">Delete</option>
</select> <label>Select Access Rights</label>`
Now I want 'Create' and 'Update' as default selected at first loading of page.
How can I do that?
See Working Demo :
$(document).ready(function() {
$('select').material_select();
});
var selectedOptions=[
"create",
"update"
];
$.each(selectedOptions, function(i,e){
$("#access_rights option[value='" + e + "']").prop("selected", true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<label for="access_rights">Select Access Rights</label>
<select id="access_rights" multiple>
<option value="default" disabled>Choose your options</option> <option value="create">Create</option> <option value="read">Read</option> <option value="update">Update</option> <option value="delete">Delete</option> </select>
Just use selected in create and update option. For Ex:-
<select multiple id="access_rights">
<option value="default" disabled>Choose your options</option>
<option value="create" selected>Create</option>
<option value="read">Read</option>
<option value="update" selected>Update</option>
<option value="delete">Delete</option> </select>
<label>Select Access Rights</label>
$( document ).ready(function() {
$(".select-wrapper").each(function() {
var wrapper = this;
$(this).find("ul>li").each(function() {
var li = this;
var option_text = $(this).text();
$(wrapper).find("select option:selected").each(function() {
var selected_text = $(this).text();
if(option_text == selected_text) {
//$(li).addClass("active selected");
//$(li).find("input").prop('checked', true);
$(li).click();
}
});
});
});
});
I have the following code in html:
<select>
<option text="item9" value="9"></option>
<option text="item10" value="10"></option>
</select>
The select shows up as blank in firefox. There are no elements. But it works in IE. The following works in both:
<select>
<option text="item9" value="9">item9</option>
<option text="item10" value="10">item10</option>
</select>
I am using the following dojo code to create the dropdown:
dojo.byId("sel1").add(dojo.create("option", { text:optionText, value:docNode.childNodes[i].getAttribute("id") }));
How do I create
<option text="item9" value="9">item9</option>
with dojo?
All you really need is:
<select>
<option value="9">item9</option>
<option value="10">item10</option>
</select>
The text attribute is non-standard.
You can use:
dojo.byId("sel1").add(dojo.create("option",{
innerHTML:optionText,
value:docNode.childNodes[i].getAttribute("id")
}));