Utilizing multiple variables in select option

Question

Community, I currently have a select drop down whose values and titles are being populated via a mysql query. Currently, all it's passing is (source_id). However, I want it to pass a second variable as well, (source_flag). I need both for the following reasons. If the source_flag is set to 'YES', my JS will make a div visible. I need the (source_id) to insert a value back into my database. Below is my current drop down and JS function. Add in a little bit of HTML.

HTML

<fieldset style="display: inline;" id="source">
<legend class="legend1"><h2>&nbsp; Ticket Source &nbsp;</h2></legend>
<div style="padding-top: 5px;" id="source">
     <div class="input-field">
     <?php include $ins_tic.'selectSource'.$ext; ?>
     </div>
     <div id="received"  style="display: none;">
     <input type="text" id="dateTimeField" name="received_on" style="width: 160px;" placeholder="Time Received"/>
     <script>AnyTime.picker('dateTimeField');</script>
     </div>
</div>
</fieldset>

The $ins_tic.'selectSource'.$ext file

<?php
//This populates the drop down
echo '
<select id="ticket_source" name="ticket_source" tabindex="16" onchange="showEmail(this.value)">
<option value="">Select Source</option>';
//I want to add source_flag to the query, and add that value to the select option
$get_sources = mysql_query("SELECT source_id, source_name FROM ticket_source ORDER BY source_name ASC");
 while (($source_list = mysql_fetch_assoc($get_sources)))
 {
      echo '
      <option value="'.$source_list['source_id'].'">'.$source_list['source_name'].'</option>';
 };
 echo '
 <option value="0">Other</option>
 </select>';
 ?>

Finally, my current javascript. Note, the javascript is currently going off of the source_id value. I dislike doing it that way because additional sources may and probably will be added in the future.

function showEmail(id)
{
    var div = document.getElementById("received");
    if(id == 2 || id == 3 || id == 5)
    {
        div.style.display = 'block';
    }
    else
    {
        div.style.display = 'none';
    }
}

CBC_NS · Accepted Answer · 2013-09-25 19:45:57Z

1

How about:

<select id="ticket_source" name="ticket_source" tabindex="16" onchange="showEmail(this)">

followed by

  <option value="'.$source_list['source_id'].'" data-flag="'.$source_list['source_flag'].'>'.$source_list['source_name'].'</option>';

And then

function showEmail(element)
{
    var id = element.value;
    var flag = element.options[element.selectedIndex].getAttribute('data-flag');
    // Do something with flag...
    var div = document.getElementById("received");
    if(id == 2 || id == 3 || id == 5)
    {
        div.style.display = 'block';
    }
    else
    {
        div.style.display = 'none';
    }
}

edited Sep 25, 2013 at 19:45

CBC_NS

1,9655 gold badges31 silver badges52 bronze badges

answered Sep 25, 2013 at 14:32

Bjorn

72.4k40 gold badges140 silver badges165 bronze badges

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

3 Comments

CBC_NS Over a year ago

When I do alert(flag); it shows up nothing. Is there something else I need to add for it to get the value of either "" or "YES when appropriate?

Bjorn Over a year ago

@CBC_NS can you show your whole code? I'll put something up on jsfiddle for you. It should work. You see the flag in the HTML when you view source yes?

CBC_NS Over a year ago

I actually figured out a solution. I used var flag = element.options[element.selectedIndex].getAttribute('data-flag'); to get the value of flag

Diodeus - James MacFarlane · Accepted Answer · 2013-09-25 14:30:40Z

0

You will need to add a delimiter, put both values in the <option> and parse it back out on the server.

 <option value="'.$source_list['source_id']._.$source_list['source_flag']'">

answered Sep 25, 2013 at 14:30

Diodeus - James MacFarlane

115k33 gold badges164 silver badges180 bronze badges

Collectives™ on Stack Overflow

Utilizing multiple variables in select option

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related