使用jQuery动态创建选择框

Question

i am creating a dynamic dropdowns based on a scenario i need to. i am wondering how it possible to keep the states of those added drop downs dynamically when a page is loading after submit button is clicked.

i am able to stote a variable in jquery and check whether form is submitted or not and if submitted to load back the previously dynamically added dropdowns (html select box) but even though i load them back still i have a problem of getting the previously selected values of those dynamic dropdowns.

I have created a fiddler. http://jsfiddle.net/jBJSw/8/

My form

<form>
    <div id="TextBoxesGroup">
        <div id="TextBoxDiv1">
            <label>Textbox #1 :</label>
            <input type="text" id="textbox1">
        </div>
    </div>
    <input type="button" value="Add Button" id="addButton">
    <input type="submit" value="submit Button" id="subButton">
</form>

Script

  $(document).ready(function () {

      var counter = 2;

      $("#addButton").click(function () {

          if (counter > 10) {
              alert("Only 10 allow");
              return false;
          }

          var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter);
          newTextBoxDiv.after().html('<label>Select #' + counter + ' : </label>' +
              '<select id="select' + counter + '" ><option value="' + "val" + ' ">"' + "desc2" + '"</option><option value="' + "val2" + ' ">"' + "desc" + '"</option><option value="' + "val3" + ' ">"' + "desc3" + '"</option>');

          newTextBoxDiv.appendTo("#TextBoxesGroup");
          counter++;
      });
  });

Appreciate if any help on finding a way to get the previously selected values after form submission. (this is needed because when a form is submitted with errors, these selected values should be same but now it refreshes and comes to default. also in a view scenario also this should be preloaded)

Answer 1

You will have to send back the selected value to the page from server side in the querystring or post header. then select the option accordingly in jquery on the base of the the value sent back.

Answer 2

Sorry for getting late have trouble in my work. Here's a possible solution for your problem.

DOM:

<form id="myform" method="post"> <!--adding id attribute-->
    <div id="TextBoxesGroup">
        <div id="TextBoxDiv1">
            <label>Textbox #1 :</label>
            <input type="text" id="textbox1">
        </div>

        <!--check if POST is established-->
        <?php if($_POST): ?>
            <?php if(count($_POST['mySelect']) < 0 ): ?>

            <?php

               //Recreate your select DOM
               $arr = $_POST['mySelect'];
               foreach($arr as $ind => $val){

                  echo '<select>';
                  echo '<option val="val" ' . ($val == "val" ? "selected" : "") . '>desc2</option>';
                  echo '<option val="val2" ' . ($val == "val2" ? "selected" : "") . '>desc</option>';
                  echo '<option val="val3" ' . ($val == "val3" ? "selected" : "") . '>desc3</option>';
                  echo '</select>';
               }

            ?>                


            <?php endif; ?>
        <?php endif; ?>
    </div>
    <input type="button" value="Add Button" id="addButton">
    <input type="submit" value="submit Button" id="subButton">
</form>

SCRIPT:

 $(document).ready(function () {

      var counter = 2;

      $("#addButton").click(function () {

          if (counter > 10) {
              alert("Only 10 allow");
              return false;
          }

          var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter);
          newTextBoxDiv.after().html('<label>Select #' + counter + ' : </label>' +
              '<select id="select' + counter + '" ><option value="' + "val" + ' ">"' + "desc2" + '"</option><option value="' + "val2" + ' ">"' + "desc" + '"</option><option value="' + "val3" + ' ">"' + "desc3" + '"</option>');

          newTextBoxDiv.appendTo("#TextBoxesGroup");
          counter++;
      });

     //adding hidden inputs
     $('#myFORM').on('submit', function(){

      $('#myFORM select').each(function(){
         slct = $('<input type="hidden" name="mySelect[]" value="' +  $(this).val() +'">');
         $('#myFORM').append(slct);
      });

  });
  });