I have a select list:
<option ng-repeat="hour in Hours"
value="{{hour.Value}}"
ng-show="filterEvent($index)"
ng-selected="hour.Value == EventDate || $first">
{{hour.Text}}
</option>
And I want the first element that is not hidden to be automatically selected. Right now if I hide the first elements it wont change the selected index.
How can I do this?
just hide the first option
<select ng-model="hour" required="required"
ng-options="hour.value as hour for hour in hours" >
<option style="display:none" value="">select a type</option>
</select>
Angular tends to ignore the selected atributte, if you want an element to be selected simply give your select a ng-model and set the value you want selected to your model variable.
<select ng-model="selectValue" name="mySelect">
<option ng-repeat="hour in Hours"
value="{{hour.Value}}"
ng-show="filterEvent($index)"
>
{{hour.Text}}
</option>
</select>
And, in your controller use a forEach to find the first visible value of your array and asign it's value to your model variable.
Related
Like i said in the title i want to keep a list hidden until another another list above has been selected, for example show student list after a class had been selected (so only student who belong to the selected class are shown)
<select name="class">
<option value="">class1</option>
<option value="">class2</option>
</select>
<select name="student">
<option value="">student1</option>
<option value="">student2</option>
</select>
Initially apply a hidden class (with display: none styling) to the second select list and then on the change of value (indicating a choice has been made) in the first select - remove the hidden class.
EDIT - as as suggested by #HerrSerker - the event listener is now in the JS as opposed to inline in the HTML.
Note that each select list has a selected disabled option - to allow for a blank option rather than the first option selected by default.
// add event listener for change of class select list
document.querySelector('select[name="class"]')
.addEventListener('change', updateStudent)
//function to remove the hidden class and styling of the second select list
function updateStudent() {
var el = document.querySelector('select[name="student"].hidden');
el.classList.remove('hidden')
}
select[name="student"].hidden {
display:none
}
<select name="class">
<option disabled selected></option>
<option value="">class1</option>
<option value="">class2</option>
</select>
<select name="student" class="hidden">
<option disabled selected></option>
<option value="">student1</option>
<option value="">student2</option>
</select>
I am using Map to populate Struts2 tag <s:select > , observed that when there are multiple submission of the form a blank line gets appened at the end of the list.
For instance, if Map has 2 key value pairs it show 3 records and append a blank record in the bottom(not at the top--for default case).
Item 1
Item 2
<-blank->
<s:select id="bankAccountId"
name="accountBean.recordDetails.BankAcct.bankAcctId" label=""
headerKey="" headerValue="" list="accountBean.bankAccountMap"
listKey="key" listValue="value" />
<select name="accountBean.recordDetails.BankAcct.bankAcctId">
<option value=""></option>
<option value="51089">BANK XXXX123</option>
</select>
<select name="accountBean.recordDetails.BankAcct.bankAcctId" id="bankAccountId"> <option value="-1" selected="selected">Default values</option> <option value="77746">Details XXXXXX2246</option> <option value="-1" selected="selected"> </option> <---this default value gets appened in the end... </select>
When i use s:select attribute emptyOption="true" same issue is observed but when emptyOption="false" top element becomes non-empty(which i dont want).
on re-submission
<option value="" selected="selected"> </option> extral option gets appened if prior to resubmission default/empty value was chosen..
Can this be handeled by javascript or jQuery??
As things seem, I think the problem is that you are adding the default value to the map after submission, so in the next rendering of the page, it already contains that item. Usually, you should refill your map in your prepare method, that way the -1 key won't be in the map.
There's this website that I want to change how they display their dropdown menu.
http://i.stack.imgur.com/Wu718.jpg
I wanted to make it so that the default value is "Items for Sale", instead of "Forum Topics"
Here's their source code.
<select name="sec" style="margin-top:5px;width:138px;">
<option value="topics">Forum Topics</option>
<option value="s">Items for Sale</option>
<option value="b">Want to Buys</option>
<option value="users">Members</option>
</select>
Since I don't really care about how it looks, I just want to change the value="topics" to value="s" even without changing the texts.
I've read some tutorials, but they mostly use IDs and Classes as a selector, in this case, how do I target this Select from many other in their website and change the value.
You can use:
$('select[name=sec]').val('s');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<select name="sec" style="margin-top:5px;width:138px;">
<option value="topics">Forum Topics</option>
<option value="s">Items for Sale</option>
<option value="b">Want to Buys</option>
<option value="users">Members</option>
</select>
I think this is what you're describing in the comments below:
var dropdown = $('select[name=sec]');
// change the s option to items
dropdown.find('option[value=s]').attr('value', 'items');
// change the topics option to s
dropdown.find('option[value=topics]').attr('value', 's');
// change the dropdown's value to s
// (first option should continue to be selected because its value is now s)
dropdown.val('s');
// (this is for demo purposes only)
dropdown.after($("<div>").text("New HTML is: " + dropdown[0].outerHTML));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<select name="sec" style="margin-top:5px;width:138px;">
<option value="topics">Forum Topics</option>
<option value="s">Items for Sale</option>
<option value="b">Want to Buys</option>
<option value="users">Members</option>
</select>
You can use the name or any other attribute.
for css
select[name="sec"]
or jquery
$('select[name="sec"]').
DEMO inspect element from your browser to see the changes
you can select a select dropdown list with select[name=sec] and select the first option with option:first
$('select[name=sec] option:first').val('s');
and if you need to change any of options just use .eq()
$('select[name=sec] option').eq(0).val('s'); // eq(0) for the first option element . eq(1) for the second option element ...
If you want to make selected an other option use this code:
$('select[name="sec"]').find('option:selected').removeAttr('selected');
$('select[name="sec"]').find('option[value="s"]').attr('selected','selected');
This script removes the default selection (the first option) and select the option which has "s" value. For the Demo:
$('select[name="sec"]').find('option:selected').removeAttr('selected');
$('select[name="sec"]').find('option[value="s"]').attr('selected','selected');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<select name="sec" style="margin-top:5px;width:138px;">
<option value="topics">Forum Topics</option>
<option value="s">Items for Sale</option>
<option value="b">Want to Buys</option>
<option value="users">Members</option>
</select>
You have to find this element in the DOM. For this you should find the first parent container element of the which has ID or CLASS attribute. From that element you can create a search for the element what you want by using the .find() method.
If there're more element which has name attribute with "sec" value you should build a chain of find which separate that you want. For that you can use these function templates:
$(#CONTAINER_ID).find(.SUBCONTAINER_CLASS).find(ELEMENT_TYPE);
$(#CONTAINER_ID).find(SUBCONTAINER_TYPE).find(OTHER_SUBCONTAINER_TYPE:eq(X));
I have one html page where i have set of select menu like this give below.
<label>Product Details</label>
<select id="PD">
<xsl:for-each select="PRODUCT_DETAILS">
<option value="{DATA0}"><xsl:value-of select="DATA0"></xsl:value-of></option>
</xsl:for-each>
</select>
<label>Price Details</label>
<select id="PRD">
<xsl:for-each select="PRICE_DETAILS">
<option value="{DATA1}"><xsl:value-of select="DATA1"></xsl:value-of></option>
</xsl:for-each>
</select>
This select menu option is getting populated by some multi row xml as you can see. Now I if I select Product Details option number 2 then from price details ,option number 2 should get select auto.
I just wanted to know how to get which option number is get selected using jquery like say if i select if i selected option number 2 in Product Details it should give 2 as a result.
And based on this value how can i select option number 2 in price details using option number only using jquery.
I think you are looking for the index of the selected option
To get
var index = $('#selectid option:selected').index(); // it gives 0 based index
To set
$('#selectid option').eq(index).prop('selected', true)
Demo: Fiddle
try something like this
document.getElementById("mySelect").selectedIndex;
The selectedIndex property sets or returns the index of the selected option in a drop-down list.
The index starts at 0.
$('#myselect').get(0).selectedIndex;
Here is simple example:
In HTML:
<select id="myselect">
<option value="1">Mr</option>
<option value="2">Mrs</option>
<option value="3">Ms</option>
<option value="4">Dr</option>
<option value="5">Prof</option>
</select>
In JS:
$( "#myselect option:selected" ).index();
Read about .index() here. DEMO.
I have a dynamically created drop down and if the option "Other" is in that drop down i want to show div #optionalmess
<select class="VariationSelect" style="width: 95px;">
<option value="">Select Size</option>
<option value="1">Example</option
<option value="21">Other</option>
</select>
If .variationselect contains the option "Other" (or value="21") show #optionalmess
If "other" (value="21") is not in the drop down, I want to hide #optionalmess
You can use .toggle(bool) for the hide/show with a condition, like this:
$("#optionalmess").toggle($(".VariationSelect option[value=21]").length>0);
This looks for any <option> with a value of 21 under .VariationSelect and checks the .length to see if any elements matched that selector.
You can use the contains selector, in conjunction with toggle() for this:
$('#optionalmess').toggle(
$(".VariationSelect option:contains('Other')").length > 0
);