How to set materialize multiselect selected values from jquery - materialize

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();
}
});
});
});
});

Related

How to display multi dimensional array into the multiple dropdown menu?

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

How can I add class="required" in the following select v-model?

<div v-for="value in day" class="checkboxFour">
<input type="checkbox" id="need" value="value.val" v-model="value.selected" style="width: 10%!important;">
<label for="need" style=" width: 30%!important;">{{value.name}}</label>
<select v-model="value.from" class="select-style">From
<option value="08:00">08.00</option>
<option value="12:00">12.00</option>
<option value="20:00">20.00</option>
<option value="23:00">23.00</option>
</select>
<select v-model="value.to" class="select-style">To
<option value="08:00">08.00</option>
<option value="12:00">12.00</option>
<option value="20:00">20.00</option>
<option value="23:00">23.00</option>
</select>
<br>
</div>
This is select option. When I use required="". I am getting getAttribute error. How can I able to correct the same?
Also how can I use selected in the following case? My target is select a particular value previously and then user can change according to his need? Please help me to obtain the same?
The required attribute is a boolean (an not a class). You don't need to give it a value; if it is present in the select tag, the select is required.
You can also bind it to a boolean value to change whether the select is required.
new Vue({
el: '#app',
data: {
isRequired: false
}
});
[required] {
outline: thin solid red;
}
<script src="//unpkg.com/vue#latest/dist/vue.js"></script>
<div id="app">
<select required>
<option>An option</option>
</select> This one is always required
<div>
<select :required="isRequired">
<option>Whatever</option>
</select>
<input type="checkbox" v-model="isRequired"> Is Required: {{isRequired}}
</div>
</div>
As it mentioned in Vue.JS docs you can use v-bind:class to achieve what you wanted:
<select v-model="value.from" v-bind:class="{required: isRequired}">
which required is data, computed field in your app/component.
Update 1:
new Vue({
el: "#myApp",
data: {
// you should define a variable in your data
isRequired: false
},
methods: {
doSomething: function(){
this.isRequired = true;
}
}
});

VueJS and Drop down values

Am I grabbing the value of the selection incorrectly in this Vue template form?
<select class="form-control" v-model="object.property">
<option selected="selected" value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
</select>
You are binding the value of object.property to the select element correctly.
But, Vue is going to ignore the selected attribute on the first option element.
Here's the warning you will get if you try to use this template:
inline selected attributes on <option> will be ignored when using v-model. Declare initial values in the component's data option instead.
So, if you want the initial value of the select to be the first option, set object.property to that value when you define it in the data method.
Here's an example:
new Vue({
el: '#app',
data() {
return { object: { property: "Option 1" } }
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
<div id="app">
<select class="form-control" v-model="object.property">
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
</select>
{{ object.property }}
</div>

getting this error in ie11: Unable to get property 'options' of undefined or null reference

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

Unable to select a dropdown by value, visible text or index using selenium select command

I am unable to select an option dynamically using select commands by value, visible text or index, the workaround was i can use actions to click select and select a particular option or sending keys ArrowDown which is not a best way to implement because i want to use the same select function globally to automate UI all over the website like a keyword function.
sample script below:
WebElement selectElement = driver.findElement(By.xpath(.//*[#id='XYZPopUpForm:j_idt90:country_label']));
Actions selectItem = new Actions(driver);
selectItem.moveToElement(selectElement).click().perform();
selectItem.sendKeys(Keys.ARROW_DOWN).sendKeys(Keys.ARROW_DOWN).perform();
selectItem.sendKeys(Keys.ENTER).perform();
HTML Code :
<tr>
<td>
<label for="XYZPopUpForm:j_idt90:country">Country</label>
</td>
<td>
<div id="XYZPopUpForm:j_idt90:country" class="ui-selectonemenu ui-widget ui-state-default ui-corner-all">
<div class="ui-helper-hidden-accessible">
<div class="ui-helper-hidden-accessible">
<select id="XYZPopUpForm:j_idt90:country_input" tabindex="-1" name="XYZPopUpForm:j_idt90:country_input">
<option selected="selected" disabled="disabled">--select--</option>
<option value="AF">Afghanistan</option>
<option value="AX">Ă…land Islands</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
<option value="AI">Anguilla</option>
<option value="AQ">Antarctica</option>
<option value="AG">Antigua and Barbuda</option>
<option value="AR">Argentina</option>
<option value="AM">Armenia</option>
<option value="AW">Aruba</option>
<option value="AU">Australia</option>
<option value="AT">Austria</option>
<option value="AZ">Azerbaijan</option>
<option value="BS">Bahamas</option>
<option value="BH">Bahrain</option>
<option value="BD">Bangladesh</option>
<option value="BB">Barbados</option>
<option value="BY">Belarus</option>
<option value="BE">Belgium</option>
<option value="BZ">Belize</option>
<option value="BJ">Benin</option>
<option value="BM">Bermuda</option>
<option value="BT">Bhutan</option>
<option value="BO">Bolivia, Plurinational State of</option>
<option value="BQ">Bonaire, Sint Eustatius and Saba</option>
<option value="BA">Bosnia and Herzegovina</option>
<option value="BW">Botswana</option>
<option value="BV">Bouvet Island</option>
<option value="BR">Brazil</option>
<option value="IO">British Indian Ocean Territory</option>
<option value="BN">Brunei Darussalam</option>
<option value="BG">Bulgaria</option>
<option value="BF">Burkina Faso</option>
<option value="BI">Burundi</option>
<option value="KH">Cambodia</option>
<option value="CM">Cameroon</option>
<option value="CA">Canada</option>
<option value="CV">Cape Verde</option>
</select>
</div>
Updated Script:
WebDriverWait wait = new WebDriverWait(driver, 10);
WebElement selectElement = driver.findElement(By.id("XYZPopUpForm:j_idt90:country_input"));
((JavascriptExecutor)driver).executeScript("var select = arguments[0]; for(var i = 0; i < select.options.length; i++){ if(select.options[i].text == arguments[1]){ select.options[i].selected = true; } } ", selectElement, "Afghanistan");
wait.until(ExpectedConditions.visibilityOfElementLocated(By.id("XYZPopUpForm:j_idt90:country_input")));
Screenshot of HTML to be more clear :
Seems you are finding incorrect element By.xpath your drop-down id looks like XYZPopUpForm:j_idt90:country_input but you are finding id XYZPopUpForm:j_idt90:country_label in By.xpath, May be that is the problem. Try using Select with correct drop-down id as below :-
WebElement selectElement = driver.findElement(By.id("XYZPopUpForm:j_idt90:country_input"));
//Now use select
Select select = new Select(selectElement);
select.selectByVisibleText("Afghanistan");
or
sel.selectByIndex(1);
or
sel.selectByValue("AF");
Edited :- If above does not work due to visibility of element you should try using JavascriptExecutor as below :-
WebElement selectElement = driver.findElement(By.id("XYZPopUpForm:j_idt90:country_input"));
((JavascriptExecutor)driver).executeScript("var select = arguments[0]; for(var i = 0; i < select.options.length; i++){ if(select.options[i].text == arguments[1]){ select.options[i].selected = true; } }", selectElement, "Afghanistan");
Hope it works...:)