CODEWITHSUNDEEP
phpjavascriptdrop-down-menugetelementbyidunique-id
tora0515
tora0515

Reputation: 2547

PHP foreach loop, unique <select> id for getElementById

What I am interested in getting is $option_value['price'] in a string from the dropdown, not . Using .value returns the later.

I have select menus that are created in a foreach() loop. The drop downs will hold price options. I am trying to give each product it's own id so I can use the javascript onChange() function to update prices on the screen.

The select tag looks like this: 

 <select name="option[<?php echo $option['product_option_id']; ?>]" class="select_options" id="select_<?php echo $product['product_id']; ?>" onchange="getIt(this);">

and the javascript:

function getIt(el) {
var id = el.id;
a = document.getElementById(id).text;
alert(a);   
}

Alerting out id gives me select_some number. So I can see that it is getting the id. but alerting out a gives me [object HTMLSelectElement].

so I tried 

alert(a.options.selectedIndex.value);

and get unidentified.

<?php if ($product['options']) { ?>
<div class="options" id="option_<?php echo $product['product_id']; ?>">
<?php foreach ($product['options'] as $option) { ?>
<?php if ($option['type'] == 'select') { ?>
<div id="option-<?php echo $option['product_option_id']; ?>" class="option select_option">    
  <select name="option[<?php echo $option['product_option_id']; ?>]" class="select_options" id="select_<?php echo $product['product_id']; ?>" onchange="getIt(this);">

    <option value=""><?php echo $text_select; ?></option>
    <?php foreach ($option['option_value'] as $option_value) { ?>

    <option value="<?php echo $option_value['product_option_value_id']; ?>"><?php echo $option_value['name']; ?>

    <?php if ($option_value['price']) { ?>
    (<?php echo $option_value['price_prefix']; ?><span id="newPrice"><?php echo str_replace('.00','.',$option_value['price']); ?></span>)
    <?php } ?>
    </option>
    <?php } ?>
  </select>
</div>
<?php } ?>

Upvotes: 0

Views: 1749

Answers (4)

nnnnnn
nnnnnn

Reputation: 150080

"is there a way I can get the text shown on the drop down ($xx.xx), instead of the value?"

I think this is what you are looking for:

function getIt(el) {
   var a = el.options[el.selectedIndex].text;
   alert(a);
}

el.selectedIndex gives you, obviously, the index of the currently selected option, which you can use as an index into the collection of options, el.options, and then get that option's text. The text property belongs to each option, not to the select.

Demo: http://jsfiddle.net/FCnUQ/

(Note that if no option is selected selectedIndex will be -1.)

You don't need to use getElementById() at all because you already have a reference to the element, el.

Upvotes: 1

Pragnesh Chauhan
Pragnesh Chauhan

Reputation: 8476

as you passing this like getit(this) you should code like this 

function getIt(el) {
var id = el.id;
a = document.getElementById(id).value;
alert(el.value);   //you can directly alert like this
}

Upvotes: 0

iLaYa ツ
iLaYa ツ

Reputation: 4017

Try this code, put document.getElementById(id).value instead of document.getElementById(id).text

function getIt(id) {
 a = document.getElementById(id).value;
 alert(a);   
}

Upvotes: 1

janenz00
janenz00

Reputation: 3310

Change :

  a = document.getElementById(id).text;

To:

  a = document.getElementById(id).value;

That will alert the value of selected option.

Upvotes: 3

Related Questions