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>
Related
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.
UPDATED
select input's selected option is not working if I use v-model on select.
<p class="topics">fruits</p>
<select class="select" v-model="selectFruit">
<option selected value="">--all--</option>
<option :key="index" :value="item" v-for="(item,index) in fruitList">{{item}}</option>
</select>
if I don't use v-model, then selected is working. But I need that v-model bind for filter my array. But it looks like I can't use v-model and selected at the same time.
Use selected attribute
https://www.w3schools.com/tags/att_option_selected.asp
<select class="select" v-model="searchCity">
<option value="" selected>--全部--</option>
<option :value="item" v-for="item in uniqueCity">{{item}}</option>
</select>
Adding a bonus to the above answer, if you want to have a default placeholder but not a valid value (Like "Select country here") you can do it like this:
<select>
<option value="" selected disabled hidden>Select country here</option>
<option value="1">Bulgaria</option>
<option value="2">Serbia</option>
<option value="3">Cyprus</option>
</select>
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")
}));