CODEWITHSUNDEEP
phpjqueryhtml
Juan Gonzales
Juan Gonzales

Reputation: 1977

how to create a comma delimited array from an ordered select box in jquery

How can I create an array of items from a generated list using a select box to order the items and deliminate them by a comma.

Example...

I have a list of items generated by the id in the database with a select box associated with the item.

<?php
$sql = mysql_query("SELECT id, title FROM songs WHERE id='$id' ORDER BY title ASC");

  while($row = mysql_fetch_array($sql)){
    $id = $row['id'];
    $title = $row['title'];
    $song_chart .= '

      <div id="$id">

        <select>
          <option val="1">1</option>
          <option val="2">2</option>
          <option val="3">3</option>
          <option val="4">4</option>
          //etc...
        </select>

        <a href="page.php?id='.$id.'">'.$title.'</a>

      </div>';
  }
$song_chart .= '<button></button>';
echo $song_chart;
?>

I have multiple items that I would like to select a value for.

If the value is greater than 0 than I want to grab the 'id' from the item the select is associated with and order all of the items by the selection (not the id).

Then I would like to post the information and place it into a comma delimited array to insert into my database.

I currently do not have any code that I have actually tried, I am really not sure how to go about this. Any help would be greatly appreciated. Thanks in advance!

EDIT

The output of the above would look like this...

<div id="1">
  <select>
    <option val="1">1</option>
    <option val="2">2</option>
    <option val="3">3</option>
    <option val="4">4</option>
    //etc...
  </select>

  <a href="page.php?id=1">one</a>

</div>
<div id="2">
  <select>
    <option val="1">1</option>
    <option val="2">2</option>
    <option val="3">3</option>
    <option val="4">4</option>
    //etc...
  </select>

  <a href="page.php?id=2">two</a>

</div>
<div id="3">
  <select>
    <option val="1">1</option>
    <option val="2">2</option>
    <option val="3">3</option>
    <option val="4">4</option>
    //etc...
  </select>

  <a href="page.php?id=3">three</a>

</div>
<div id="4">
  <select>
    <option val="1">1</option>
    <option val="2">2</option>
    <option val="3">3</option>
    <option val="4">4</option>
    //etc...
  </select>

  <a href="page.php?id=4">four</a>

</div>

<button></button>

Then on submit I would like to reorganize the generated id's accourding to the selected value and place then in an array/string like so...

var arr = '2, 3, 1, 4';

and post them to the database.

Upvotes: 0

Views: 539

Answers (2)

Juan Gonzales
Juan Gonzales

Reputation: 1977

I came with a solution with the help from Diodeus (Thanks). 

$(document).ready(function(){
  $('.selection').value(""); // clears the values
  $('selection option').click(function(){ // when option is clicked

    s=new Array(); // create array
    $("select option:selected").each(function(){
     // check to see which values are selected
      var v = $(this).val();

      if(v != ""){ // if the value is not empty.
        s.push(v); 
      }

    });

  });
  $("#submitList").click(function(){
    if(s != ""){
      alert(s);//or submit the list
    }
  });
});

I also changed a few things in the html output.

<div id="3">
  <select class='selection'>
    <option></option>
    <option val="1,id">1</option>
    <option val="2,id">2</option>
    <option val="3,id">3</option>
    <option val="4,id">4</option>                      
    //etc...                    
  </select>
  <a href="page.php?id=3">three</a>
</div>

Upvotes: 0

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114367

OK, in this situation, it's easier to encode the data in the value of the OPTION

<div id="3">
  <select>
    <option val="1">1</option>
    <option val="2">2</option>
    <option val="3">3</option>
    <option val="4">4</option>
    //etc...
  </select>

  <a href="page.php?id=3">three</a>

</div>

Becomes:

<div id="3">
  <select>
    <option val="3,1">1</option>
    <option val="3,2">2</option>
    <option val="3,3">3</option>
    <option val="3,4">4</option>
    //etc...
  </select>

  <a href="page.php?id=3">three</a>

</div>

Embed the ID in the data. Comma separated.

Upvotes: 1

Related Questions