I am using materilizecss and i have the following dropdown:
<select class="txtInput" data-val="true" data-val-number="The field SelectedAssetCategoryId must be a number." data-val-required="Select a asset category" id="ddlAssetCategory" name="SelectedAssetCategoryId"><option value="">Asset Category</option>
<option value="1">Disease State/Condition Training</option>
<option value="5">Hot Topics Training</option>
<option value="6">Launch Training</option>
<option value="7">Medical Meetings</option>
<option value="2">Product Training</option>
<option value="8">Quiz</option>
<option value="4">Real World Evidence/HEOR Training</option>
<option value="3">Treatment/Competitive Landscape Training</option>
</select>
I was initilizing it like so:
$("select").not('[multiple="multiple"]').formSelect({
});
But what i wanted was the dropdown to show below the selectbox not above , so i added the below line of code:
$("select").not('[multiple="multiple"]').formSelect({
belowOrigin: true
});
But even this does't seem to work , What option can i add so that the dropdown menu shows below the select box ?
Use This :
$("select").not('[multiple="multiple"]').formSelect({
dropdownOptions: {coverTrigger: false}
});
Instead of :
$("select").not('[multiple="multiple"]').formSelect({
belowOrigin: true
});
JSFiddle
Actually with dropdownOptions you can pass dropdown options to select form.
Related
I have a button witha a href link:
My button
Then I have 3 drop-down (select) inputs, lets call them A, B & C
Depending on what the users choose, I want the link to be changed as this
My button
All three drop-downs will be Required
Find the following snippet useful. Handle the default values for the query params.
<select id="a" onchange="changeUrl()">
<option value="a1">a1</option>
<option value="a2">a2</option>
</select>
<select id="b" onchange="changeUrl()">
<option value="b1">b1</option>
<option value="b2">b2</option>
</select>
<select id="c" onchange="changeUrl()">
<option value="c1">c1</option>
<option value="c2">c2</option>
</select>
<a id="test" href="mysite.com">My button</a>
<script>
function changeUrl(){
let url="mysite.com?a=";
let a= document.getElementById('a').value;
url+=a+"&b=";
let b=document.getElementById('b').value;
url+=b+"&c=";
let c=document.getElementById('c').value;
url+=c;
document.getElementById('test').href=url;
}
</script>
</body>
I am trying to preselect (set as default) value from Angular 5 drop down.
There are three values and I am trying to set the second one with this code but it doesn't work. I can't make any changes in the component, only in the template.
<select [(ngModel)]="declaration.media" name="media" (change)="onChangeMedia()" class="form-control form-control-sm" required>
<option *ngFor="let media of mediaArray" value="{{media.value}}" selected = "{{media.value == '02'}}">{{media.text}}</option>
</select>
UPDATE: if I remove [(ngModel)] then it works, but no two way binding.
<select>
<option value="" selected disabled hidden>Choose here</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
I'm using VBA to open a website, login, and navigate to a certain page. There is a dropdown with 8 options.
I used this code to change the dropdown to the value I want, but it always reverts back to the default as I continue. How do I lock this change in?
Set Element = IE.Document.getElementsByName("date_range")
Element.Item(0).Value = "custom"
Here's the page code:
<div class="SelectInput">
<select class="SelectInput-select" name="date_range">
<option value="all_time">All Time</option>
<option value="today">Today</option>
<option value="yesterday">Yesterday</option>
<option value="this_month">Month to date</option>
<option value="last_month">Last Month</option>
<option value="this_year">Year to date</option>
<option value="last_year">Last year</option>
<option value="custom">Between...</option>
</select>
<div class="SelectInput-arrows">...</div>
</div>
Thanks,
you need to set the selected attribute .... ref: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_option_selected
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")
}));
how can i get visible value from disable dropdown list ?
Best Regards,
thank you
You can use selenium.getSelectedValue() or selenium.getSelectedLabel(). Both are described here.
If you have a dropdown list defined as follows:
<select name="dropdown" disabled>
<option value="1">one</option>
<option value="2">two</option>
<option selected value="3">three</option>
<option value="4">four</option>
</select>
Then you can use the following script to assert that the (disabled) selected label is 'three'.
String selectedLabel = selenium.getSelectedValue("name=dropdown");
assertEquals("three", selectedLabel);