How to put multiple arguments inside OPTION for Javascript?

Question

I created a table in SQL via PHP that has 3 columns. I'm trying to put the values inside a SELECT dropdown in this way:

The first column will be in the value of the OPTION (for passing in the POST).
The second column will be in the display of the OPTION.
The third column will be hidden and sticks to each row in the dropdown, so when the user chooses one option from the dropdown, the hidden column will present in other div.

For example, if the table is:

col1  col2  col3
-----------------
1     Joe   Key st.
2     Matt  Link st.

When the user chooses Joe, Key st. will display in a separate div, and after the user presses enter, the value 1 will be sent via POST.

This is what I got so far:

$('.foo3').on('change', function() {
  var add = $(this).parent().find('.foo3').value();
  $('.foo2').html(add);
});

<select class="foo3">
  <?php while ($curRow=mysqli_fetch_array($TableOutput)) {                                                      
    echo "<input class='foo' type='hidden' value='{$curRow['col3']}'><option value='{$curRow['col1']}'>{$curRow['col2']}</option>"; 
  } ?>
</select>
<div class="foo2"></div>

Thanks!

@RuchishParikh Why did you edit the HTML of my answer in to this question? — Rory McCrossan
– Rory McCrossan, Commented Nov 21, 2016 at 11:22
I have edited to convert it into code snippet. sorry if I am wrong. @RoryMcCrossan — RJParikh
– RJParikh, Commented Nov 21, 2016 at 11:24
It's fine to edit the question to include a snippet, but the problem was you used the HTML from my answer, not the OPs original code. Please take care in future. — Rory McCrossan
– Rory McCrossan, Commented Nov 21, 2016 at 11:25

Rory McCrossan · Accepted Answer · 2016-11-21 11:15:37Z

3

You can store your own metadata in an element by using data attribute. You can then read that back out when the option is chosen. Try this:

$('.foo3').change(function() {
  $('.foo2').text($(this).find('option:selected').data('location'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="foo3">
  <option>Please select...</option>
  <option value="1" data-location="Key St.">Joe</option>
  <option value="2" data-location="Link St.">Matt</option>
</select>
<div class="foo2"></div>

To create that HTML output, your PHP would look like this:

echo "<option value=\"{$curRow['col1']}\" data-location=\"{$curRow['col3']}\">{$curRow['col2']}</option>";

answered Nov 21, 2016 at 11:15

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Mahi Over a year ago

@RoryMcCrossan is it good to store data in html element ? will it cause slow to load ??

Rory McCrossan Over a year ago

It's absolutely fine, and it won't affect performance in any noticable way.

junkfoodjunkie Over a year ago

There is no real difference between having the data show on the page, and load it into a data-attribute. There is a very slight overhang (perhaps) of HTML-code, but it should be (in most cases) minimal, and not provide any difference in loading time.

Rory McCrossan Over a year ago

@junkfoodjunkie there's also the overhead of jQuery building the cache object, but again the delay is infinitesimal. If performance is of that high a concern you shouldn't be using jQuery at all.

Rory McCrossan Over a year ago

@DvirNaim the same technique works, just add another data-XXX attribute and use data('XXX') to retrieve it in jQuery

|

Collectives™ on Stack Overflow

How to put multiple arguments inside OPTION for Javascript?

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related