return a select option text rather than its numeric value

[mbarandao]

Hello:

I need to obtain the text value of the select list instead of its numeric value.

<select name="categories[]" class="categories" ><option value="0">--Select One--</option><option value="2">BRAKE SYSTEMS</option>.....</select>  

Based on the code above, I need to be get text Value "BRAKE SYSTEMS: rather than "2". Making the value equal to the text value is not an option.

Furthermore, this select box is part of a pair of select elements with onchange event handlers to give them a cascading behaviour. So, my php to get the text value of the selected option needs to be programmatic. On form submission, there maybe multiple selections.

I found the following code in the web, which I thought maybe able to help, but I'm unable to get it to work.

function doSubmit(oFrm){
  var sel;
  for (var i=1; i<=4; i++){
    sel = oFrm["Select"+i];
    if (sel.options[sel.selectedIndex].value!=""){
      sel.options[sel.selectedIndex].value = sel.options[sel.selectedIndex].text;
    }
  }
  return true;
}  

May I ask for some guidance?

Best,

[vibhaJ]

Are you displaying this category values from database?
If yes, then when numeric values are posted after form submission, you need to fetch value of category from database using posted numeric id.

If no, you can directly use text as a value.

Making the value equal to the text value is not an option.

Why don't you use text as value?

[mbarandao]

Thanks Vibhaj for your reply!

Yes, the select boxes are populated from db. I was hoping that there may be another way of getting the text value without querying back to db.

Because the form select boxes are added dynamically to the form, there could be any number of selections. At the moment, I cannot conceptualize an efficient way of querying the db for the correct text values.

May I point you to a link of the form for visual assessment of what writing about? if so, the link is Here

Why don't you use text as value?

The pair of select elements with onchange event handlers are chained based on their id, to thus to give them a cascading behaviour. see what I mean at the link above.

Your thoughts!

[vibhaJ]

Check this code. I have used jquery to get selected text.
Also you have used name="categories[]", there is no need to use array as select tag is not multyple. You can use name="categories" . check if this code is working for you or not!

<script src="http://code.jquery.com/jquery-1.7.js"></script>
<script language="javascript">
jQuery(document).ready(function(){
    $(".categories").change(function() {
        var selected = $(this).find("option:selected").text(); // here is selected text
        alert(selected+' clicked!');
    });
});
</script>

<select style="color: rgb(0, 51, 153); text-align: justify; font-size: 1em; border-left: medium none; border-right: medium none; border-bottom: medium none;" class="categories" name="categories">
  <option value="0">--Select One--</option>
  <option value="2">BRAKE SYSTEMS</option>
  <option value="1">CAR CARE SERVICES</option>
  <option value="4">COMFORT CONTROL</option>
  <option value="3">COOLING SYSTEM</option>
  <option value="9">OTHER</option>
</select>

[mbarandao]

vibhaJ, thank you for the code. on test, I'm able to get an alert of the the text value of the selected item. Good so far! Just a few delimas:

• As I mentioned earlier, I'm dealing with dynamically added select pair of boxes box --where as the content of the second is dependent on the selection from the first. In this sense, I need to get the text value of both the first and the second box.
• How would the jquery you suggested determine when additional select pair boxes have been added to therefore get > var selected = $(this).find("option:selected").text(); of its selection?
• And, how to go from the jquery alert to actually having the selected items text value being posted after form is submitted?

My apology, I may not be explaining myself correctly, but the only way I could populate the first select box of the pair is with an array (categories[]). If it helps, here is my php and jquery for pulling the data from db:

$r = mysql_query("SELECT sc.cat_id, sc.category_label, ss.cat_id, ss.item_id, ss.subcat_label, ss.invt, ss.product_desc, ss.invt, ss.qty, ss.cost FROM service_cat AS sc INNER JOIN service_subcat AS ss ON sc.cat_id = ss.cat_id ORDER BY sc.category_label, ss.subcat_label");
  if(mysql_num_rows($r)){
        $dd1 = "<select name=\"categories[]\" class=\"categories\" style=\"color:#003399; text-align:justify; font-size:1.0em; border-left: none; border-right: none; border-bottom: none\"><option value=\"0\">--Select One--</option>";
        $catname = '';  
        while($d = mysql_fetch_array($r)){
            if($catname != $d['category_label'])$dd1.= "<option value=\"{$d['cat_id']}\">{$d['category_label']}</option>"; 
            $array[$d['cat_id']][$d['item_id']] = array('subcat_label'=>$d['subcat_label'], 'invt' =>$d['invt'], 'product_desc' =>$d['product_desc'], 'qty'=>$d['qty'], 'cost'=>$d['cost']);
            $catname = $d['category_label'];
        }
        $dd1 .= "</select>";

    }

 $arr = json_encode($array);

and then to populate the boxes and their associated html elements, I using jquery:

$(function(){
    var data = <?php echo $arr;?>;
    var $row_template = $('#row_template tr'),
    $item_rows_container = $("#item_rows");

$("#add_row").on('click', function() {
    if ($item_rows_container.find("tr").length < 10) {
        $row_template.clone().fadeIn("slow").appendTo($item_rows_container);
    }
    return false;
}).trigger('click');

$item_rows_container.on('click', '.delete_row', function() {
    if (confirm("Delete row?")) {
        $(this).closest("tr").remove();
    }
}).on('change', '.categories', function() { //this anonymous function was addfield()
    var $this = $(this);
    var d = data[$this.val()] || {};
    var $row = $this.closest("tr");
    var $subcat_menu = $('.service_subcat', $row).empty().append('<option name="specify">------SPECIFY-----</option>');
    $.each(d, function(key, value) {
        $subcat_menu.append('<option value="' + key + '">' + value['subcat_label'] + '</option>');
    });
    $subcat_menu.trigger('change');
}).on('change', '.service_subcat', function() {
    var $this = $(this);
    var $row = $this.closest("tr");
    var category = $row.find(".categories").val();
    var d = (category && data[category] && data[category][$this.val()]) ? data[category][$this.val()] : {};
    $('.invtbox', $row).html(d['invt'] || '');
    $('.descbox', $row).html(d['product_desc'] || '');
    $('.qtybox', $row).html(d['qty'] || '');
    $('.costbox', $row).html(d['cost'] || '');
});

});

This is how I'm getting my select boxes. Now, from this, how can I incorporate your suggestion to therefore get the text value of the selected text value from each pair of select boxes --?

Any thoughts!