Page 1 of 1
getting name instead of value on a select option
Posted: Sun Sep 25, 2011 8:48 pm
by danwguy
I have something like this...
Code: Select all
<select name='report' onchange="setOptions(this.name)">
<option value="<?php echo $row['id']; ?>" name="<?php echo $row['type']; ?>"><?php echo $row['description']; ?></option>
and my javascript function is just a simple style.visibility='visible'; function to show a hidden div, but it seems to only work if I change the onchange event to this.value, which won't work for me. I need the value to be the id of the report from the db and the name as the type so I know which div to show/hide. Is there a way to pass the name to a function?
Re: getting name instead of value on a select option
Posted: Sun Sep 25, 2011 10:47 pm
by twinedev
Ok, I believe to be clear, you are wanting the name="" for the <option>, not the <select>. The following is based on that:
this while be the current item, which is the <select> so, this.name will always be "report"
so you can try the following: (just going off references, so needs tested)
this.options[this.selectedIndex].name
-Greg
Re: getting name instead of value on a select option
Posted: Mon Sep 26, 2011 10:47 am
by danwguy
exactly what I was talking about. It doesn't work though. I have this as the output html...
Code: Select all
<select id='report' onchange="setOptions()">
<option value=''>------Select A Report------</option>
<option value='1' name='1'>Active Accounts with Date Range</option></select>
and this as my javascript function called "setOptions()"...
Code: Select all
function setOptions() {
var sel = document.getElementById("report");
var val = sel.options[sel.selectedIndex].name;
if(val == 1) {
var date = document.getElementById("daterange");
date.style.visibility = "visible";
}
}
but it doesn't show the div unless I change the val to "var val = sel.options[sel.selectedIndex].value;" but I can't base the show/hide on the value, it has to be based on the name= part
Re: getting name instead of value on a select option
Posted: Mon Sep 26, 2011 7:10 pm
by danwguy
in case anyone else has this issue I figured it out using jquery...
Code: Select all
$("#report").change(function() {
var ele = $("#report option:selected").attr("name");
if( ele == '1') {
$("#options").slideDown("slow");
} else {
$("#options").slideUp("slow");
}
});