CODEWITHSUNDEEP
javascriptjqueryhtml-select
espresso_coffee
espresso_coffee

Reputation: 6110

How to iterate through multiple selects and set option based on the value from DB?

I have been working on my project where I have page that contain a table with multiple rows and each row has select(drop down).

Each of these select has one option so far. That option has a value assigned from DB.

I want to loop through all select on the page after page load. Then if select has value -1, I want to default my drop down to NO, and second option should be YES with value 0.

Here is how my table looks like:

1   8:00 AM - 8:30 AM    SELECT 
2   8:30 AM - 9:00 AM    SELECT 
3   9:00 AM - 9:30 AM    SELECT 
4   9:30 AM - 10:00 AM   SELECT

Here is my HTML code:

<tr>
    <td>~(ORDER)</td>
    <td>~(TIMESLOT)</td>
    <td>
        <label>
            <select id="blockTime_~(recordID)" name="" class="dropBox">
                <option value="~(USER_ID)"></option>
            </select>
        </label>
    </td>
</tr>

I tried something like this in JQuery:

<script>
    $j( document ).ready(function() {
        $j('.dropBox').each(function() {
            if($j(this).val() == "-1" || $j(this).val() == ""){
                $j('.dropBox').append('<option value="-1" selected="selected">No</option><option value="0">Yes</option>');
                }

                if($j(this).val() == "0" ){
                    $j('.dropBox').find("option").eq(0).hide();
                    $j('.dropBox').append('<option value="0" selected="selected">Yes</option><option value="-1">No</option>');
                }
            });
        });
    </script>

Code above gave me many Yes and No options in each row. That is not what I want. What would be the other way to get this to work? Should I maybe check values by each ID or something else?

$j = jQuery;

$j(document).ready(function() {
  $j('.dropBox').each(function() {
    if ($j(this).val() == "-1" || $j(this).val() == "") {
      $j('.dropBox').append('<option value="-1" selected="selected">No</option><option value="0">Yes</option>');
    }

    if ($j(this).val() == "0") {
      $j('.dropBox').find("option").eq(0).hide();
      $j('.dropBox').append('<option value="0" selected="selected">Yes</option><option value="-1">No</option>');
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <tr>
    <td>~(ORDER)</td>
    <td>~(TIMESLOT)</td>
    <td>
      <label>
        <select id="blockTime_~(recordID)" name="" class="dropBox">
          <option value="0"></option>
        </select>
      </label>
    </td>
  </tr>
  <tr>
    <td>~(ORDER)</td>
    <td>~(TIMESLOT)</td>
    <td>
      <label>
        <select id="blockTime_~(recordID)" name="" class="dropBox">
          <option value="-1"></option>
        </select>
      </label>
    </td>
  </tr>
  <tr>
    <td>~(ORDER)</td>
    <td>~(TIMESLOT)</td>
    <td>
      <label>
        <select id="blockTime_~(recordID)" name="" class="dropBox">
          <option value="2"></option>
        </select>
      </label>
    </td>
  </tr>
</table>

Upvotes: 0

Views: 523

Answers (1)

notacouch
notacouch

Reputation: 3655

You were making modifications to all .dropBox's when you only intended to do so on the current .dropBox of the loop's iteration.

For the .each loop, the callback gets the iterator index as the first argument and the element as the second argument. The context is the element, too, which you seemed to have gotten right but then didn't use?

$j = jQuery;

$j(document).ready(function() {
  $j('.dropBox').each(function(index, dropBox) {
    // Instead of appending options to every .dropBox, only do it for this one.
    var $select = $j(this); // or $j(dropBox);
    var val     = $select.val();
    if (val == "-1" || val == "") {
      $select.append('<option value="-1" selected="selected">No</option><option value="0">Yes</option>');
    } else if (val == "0") {
      $select.find("option").eq(0).remove(); // You can't hide an option. I am presuming you wanted the first option removed?
      $select.append('<option value="0" selected="selected">Yes</option><option value="-1">No</option>');
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <tr>
    <td>~(ORDER)</td>
    <td>~(TIMESLOT)</td>
    <td>
      <label>
        <select id="blockTime_~(recordID)" name="" class="dropBox">
          <option value="0"></option>
        </select>
      </label>
    </td>
  </tr>
  <tr>
    <td>~(ORDER)</td>
    <td>~(TIMESLOT)</td>
    <td>
      <label>
        <select id="blockTime_~(recordID)" name="" class="dropBox">
          <option value="-1"></option>
        </select>
      </label>
    </td>
  </tr>
  <tr>
    <td>~(ORDER)</td>
    <td>~(TIMESLOT)</td>
    <td>
      <label>
        <select id="blockTime_~(recordID)" name="" class="dropBox">
          <option value="2"></option>
        </select>
      </label>
    </td>
  </tr>
</table>

Upvotes: 1

Related Questions