Display index on select hover - javascript

I'm trying to display the index of the <option> element in a select. However, it will not alert the selected index. How would I alert the index of the <option> element I am hovering over?
$("#sel").hover(function (e)
{
var $target = $(e.target);
if ($target.is('option'))
{
var selectedindex = $(this).parent().prop('selectedIndex');
if (selectedindex != 0)
{
alert(selectedindex);
}
}
});
Doesn't seem to be recognizing if it is an option
http://jsfiddle.net/poppypoop/TFDMr/1/

You can just do:
var index = $(this).find("option:selected").index("option");
Fiddle: http://jsfiddle.net/TFDMr/2/

Related

Attribute selected option by text not value?

When clicking a table row, the row text copies up to the inputs above for editing purposes. The text copies up just fine, but I cannot get all the selects right. My text isn't the same as the value (for every select, it is for the third column), so I cannot use the .val() of the select.
I need to attribute/prop selected where text matches the beginning of text AND whether or not it is reimbursable (third column). Ideas? jsfiddle.net/7vLdxddr/14
$('.table').on('click', 'tr', function () {
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
}
else {
$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
for (var i = 0; i < $(this).find("td").length; i++) {
// fill input values
$(this).closest("table").find("th").eq(i).find("input:text").val($(this).find("td").eq(i).text());
// fill selects
$(this).closest("table").find("th").eq(i).find("select").val($(this).find("td").eq(i).text());
}
});
If you do like this, you don't need to have values that equals to the text.
$('table').on('click', 'tr', function () {
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
}
else {
$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
// fill inputs
$(this).closest("table").find("th").eq(0).find("input:text").val($(this).find("td").eq(0).text());
// fill selects
var text = $(this).find("td").eq(1).text();
var text3 = $(this).find("td").eq(2).text();
$(this).closest("table").find("th").eq(1).find("select option").filter(function() {
return $(this).text().indexOf(text) >= 0 && $(this).text().indexOf($(this).closest("table").find("th").eq(2).find('select option[value="' + text3 + '"]').text()) > 0;
}).prop('selected', true);
$(this).closest("table").find("th").eq(2).find('select').val(text3);
});
http://jsfiddle.net/7vLdxddr/15/
Just update the values of the select values to reflect the text coming in from the click (i.e. cir to circle, sq to square and it works perfectly.
http://jsfiddle.net/7vLdxddr/10/
What your code was trying to do was select a input with value circle, but the value of the circle field was cir so it was not being selected properly.

Removing options from a dependent dropdown based on dropdown selection

Could someone please help me handle this issue in jQuery
I have a requirement where I have two dropdowns:
The no of floors of the flat (numberOfFloors)
The flat where the user stays (whichFloorYouStay)
I need to remove all the invalid options from the second dropdown. How do I achieve this?
For example:
If a user select the numberOfFloors option as 3, then I should remove options 4 and 5 from whichFloorYouStay dropdown and just load 1,2,3 as whichFloorYouStay options.
Similarly, if a user select the numberOfFloors option as 1, then I should remove options 2,3,4,5 from whichFloorYouStay dropdown and just load 1 as whichFloorYouStay option.
Please find my JSBin link:
http://jsbin.com/sibufive/1/edit?html,js,output
Try this:
$(document).ready(function () {
//NEW CODE:
var floorsvals = new Array();
var lastvalue = Number.MAX_VALUE; //Useful for checking whether we need to append or remove elements - Initialize this with an arbitrarily large number
//Fill possible floor vals with value of <option>'s
$("#numberOfFloors option").each(function () {
floorsvals.push($(this).val());
});
//NOTE: If you already know the values of the numberOfFloors array, you can just add those values straight into the "floorsvals" array
//The above loop is just handy if you are dynamically generating a <select> list and don't already know the values
$("#numberOfFloors").change(function () {
alert($("#numberOfFloors").val());
var value = $("#numberOfFloors").val();
//NEW CODE:
//If we need to append...
if (value > lastvalue) { //This value is larger than the last value we just had
for (i = 0; i < floorsvals.length; i++) {
if (floorsvals[i] <= value && $('#whichFloorYouStay option[value=' + floorsvals[i] + ']').length === 0) { //Floor value is less than the selected maxvalue and an option with this floor value doesn't already exist...
$('<option value="' + floorsvals[i] + '">' + floorsvals[i] + '</option>').appendTo("#whichFloorYouStay"); //...So add that floor value
}
}
} else { //Otherwise, we need to remove
//OLD CODE:
$('#whichFloorYouStay option').each(function () { //Go through each option
if ($(this).val() > value) { //If this option's value is greater than the numberOfFloors value, remove it
$(this).remove();
}
});
}
//NEW CODE:
lastvalue = value; //Update last value chosen with this value
});
});
Here's a demo: http://jsbin.com/sibufive/40/edit
var value = $("#numberOfFloors").val();
should become
var value = $("#numberOfFloors").val();
value-=1
I would also suggest adding a value 0 to the first set of options one so you never have a user begin at 1 and try to move to the second menu

Select dependence of one another (the choice of age)

Need to do dynamic filtering options , namely age and do.My code jsfiddle.net,but came across a problem that does not work in chrome method hide.Found answers(1, 2) but do not know how to put them in my code.
Problem in:
$("#age_from").change(function(){
$("#age_to option").each(function(i) {
if(parseInt($("#age_from").val()) > parseInt($(this).val())) {
$(this).hide();
}
else {
$(this).show();
}
});
});
It seems that chrome wont let you simply hide option tags. You may have to resort to dynamically filling the from options after you select the to option. I've updated your jQuery code below to allow passing a range of numbers in:
function fill(element, range_start, range_end){
if(typeof range_start == 'undefined') {
range_start = 1;
}
if(typeof range_end == 'undefined') {
range_end = 100;
}
// STORE THE PREVIOUSLY SELECTED VALUE
var selected = element.val();
// RESET THE HTML OF THE ELEMENT TO THE FIRST OPTION ONLY
element.html(element.find('option').first());
var age_list = [];
for (var i = range_start; i < range_end; i++){
age_list.push(i);
}
$.each(age_list, function(key, value) {
$(element)
.append($("<option></option>")
.attr("value", value)
.text(value));
});
// RESET THE VALUE
element.val(selected);
}
fill($('#age_from'));
fill($('#age_to'));
$("#age_from").change(function(){
// FILL THE SELECT ELEMENT WITH NUMBERS FROM THE RANGE #age_from.val() + 1 TO 100
fill($('#age_to'), parseInt($("#age_from").val()) + 1, 100);
});
$("#age_to").change(function(){
// FILL THE SELECT ELEMENT WITH NUMBERS FROM THE RANGE 1 TO #age_to.val()
fill($('#age_from'), 1, parseInt($("#age_to").val()));
});
I'm not entirely sure about performance on this, but as I've removed the .each() for going through the select options to hide them, it may still perform well.
updated working fiddle here:
http://jsfiddle.net/andyface/GKVxu/1/

to see if item in dropdownList has been selected

I would like to know what the best way would be to loop through a dropdown list in html to see if and item has been selected or not.
I know in C# it would be something along the lines of
int selected = cmbFamily.SelectedIndex;
for (int loop = 0; loop < cmbFamily.Items.Count; loop++)
{
if (selected == -1)
{
MessageBox.Show("please select an item", "Please", MessageBoxButtons.OK, MessageBoxIcon.Error);
break;
}
}
how would I go about in doing this with javascript?
<tr style="font-size:12pt; font-weight:bold; color:#FFFFFF; font-family:High Tower Text;">
<td>Family to join:</td>
<td><select name="drpFamily">
<option/>-select-
<option/>Gambino
<option/>Genovese
<option/>Lucchese
<option/>Colombo
<option/>Bonanno
</select><font color="red">*</font></td>
</tr>
Kind regards
Arian
First off you HTML code is totally wrong. It is not </option>text, it is <option>text</option>
To loop through the options it is as simple as
//var options = document.getElementById("selectId").options;
var options = document.formName.selectName.options;
for(var i=0;i<options.length;i++){
if(options[i].selected){
alert(options[i].value);
}
}
but there is no need to loop through a single select. The easiest way is just to use selected index for a single select.
//var sel = document.getElementById("selectId");
var sel = document.formName.selectName;
var opt = sel.options[sel.selectedIndex];
alert(opt.value);
First: your HTML is wrong.
It should be
<option>-select-
...
or
<option>-select-</option>
...
If you just want the selected value, you can get it via the value attribute of the select element:
var value = document.getElementsByName('drpFamily')[0].value
This only works if there is only one element with name drpFamily. If not, you have to find an appropriate way to select it.
You might want to compare it against the first value (which is selected by default)
if(value !== '-select-')
You could also add a change event listener to the select element:
document.getElementsByName('drpFamily')[0].onchange = function() {
if(this.value !== '-select-') {
//a value other '-select-' than was selected
}
}

how do i get the previous selected drop down item using javascript?

i have a drop down menu, on clicking any item from the list i want to get the previously selected item. Is it possible using javascript?
You mean
<script>
var selHistory =[];
var sel;
window.onload=function() {
sel = document.getElementById('selID');
sel.onchange=function() {
selHistory[selHistory.length]=sel.selectedIndex;
}
sel.onchange(); // save the current option
}
function getPrev() {
return (selHistory.length < 1) ? "no previous":sel.options[selHistory[selHistory.length-2]].value
}
</script>
or perhaps
<select onChange="var prevSel=(this.selectedIndex>0) ? this.options[this.selectedIndex-1].value:'nothing previous'">
You can just save selected item into some var and read from it when next item will be selected.

Categories