jQuery如何保留页面重新加载时动态创建列表的选定选项

Question

Got a select list that populates using javascript, each time the page reloads the list is reset. and the selection selected by the user is lost, however for all other input options such as radio button, checkboxes or text fields no data is lost.

//example of dynamcially generated options for a dropdown list
<p id="question">How old are you (in years)?</p>
<select id="q1" name="age" style="width:157px;"></select>
<script language="Javascript"> initializeAgeList("Select Your Age",100); </script> 

//example of static options for a radio button set
<p id="question">Are you male or female?</p>
<input type = 'radio' name ='q3' value= 'male' required>Male<BR>
<input type = 'radio' name ='q3' value= 'female'>Female 

Tried using a global var to determine if the list was already set, but that proved not to work

 var isAgeSet = false; //global var

 function initializeAgeList(default_selection,limit ){
     if(!isAgeSet){ //checks to see if list has already been set, on page refresh is set to zero
         var i = 0;
         while (i <= limit){ //adds options until limit is reached
              if(i==0){
                  $("#q1").append(new Option(default_selection,i));
              }else{
                  $("#q1").append(new Option(i,i));
              }
              i++;
          }
          isAgeSet = true;
      }
 };

How can I prevent the loss of the user's selected option in a dropdownlist using jQuery?

Answer 1

It sounds like you want to persist your data between page postbacks. You should save your selected data and read it when page loads (if there is saved data). The data can be saved to a server (database / file) or on the client (local storage).

Hope this is what you needed...

Yaniv