php - Add/Remove Select Box Not Giving Values -

(the question @ bottom of post)

hello, following tutorial.

i have made 3 boxes total, 1 values , 2 separate values.

like picture shows :

this jquery :

<script type="text/javascript">         $(document).ready(function() {         $("#and").click(function() {             $("#totalselect option:selected").each(function() {             $("#select-and").append("<option value='" + $(this).val() + "'>" + $(this).text() + "</option>");             $(this).remove();             });         });         $("#removeand").click(function() {             $("#select-and option:selected").each(function() {             $("#totalselect").append("<option value='" + $(this).val() + "'>" + $(this).text() + "</option>");             $(this).remove();             });         });         $("#or").click(function() {             $("#totalselect option:selected").each(function() {             $("#select-or").append("<option value='" + $(this).val() + "'>" + $(this).text() + "</option>");             $(this).remove();             });         });         $("#removeor").click(function() {             $("#select-or option:selected").each(function() {             $("#totalselect").append("<option value='" + $(this).val() + "'>" + $(this).text() + "</option>");             $(this).remove();             });         });         });     </script> 

and html :

<div id="mass_options">         <a href="javascript:void(0);" id="and">and</a>         <a href="javascript:void(0);" id="or">or</a>         <select name="totalselect[]" id="totalselect" multiple size="5">             <?php foreach ($reasons $r) { ?>                 <option value="reason_<?php echo $r['reason_id'] ?>">reason: <?php echo $r['reason'] ?></option>             <?php } ?>             <?php foreach ($options5 $key => $value) { ?>                 <option value="status_<?php echo $key ?>">session status: <?php echo $value ?></option>             <?php } ?>             <?php foreach ($info $key => $value) { ?>                 <option value="action_<?php echo $key ?>">action: <?php echo $value ?></option>             <?php } ?>         </select>         </div>          <select name="and" id="select-and" multiple size="5" class="selectnew">         </select>         <select name="or" id="select-or" multiple size="5" class="selectnew">         </select>         <br>         <br>         <a href="javascript:void(0);" id="removeand">remove and</a>         <a href="javascript:void(0);" id="removeor">remove or</a> 

the issue

when click next sends me page var_dump of post values, noticing ever add "and box" or "or box" not in var_dump value. way can submitted (when click next) highlighting value in "and box" or in "or box". how can have so, if in either "and box" or "or box" automatically selected me submit script without me having highlight them?

the reason why doing can dynamically build query clauses being "and" or "or" can make emailing students lot more dynamic rather cut , dry.

any great.

in native form submit have "highlight" options. know selected options send in post. can select them jquery before sending data:

$("form *:submit").click(function() { /* choose better selector submit button */     $("#select-and options, #select-or options").attr("selected", true);     $(this).parents("form:first").submit(); }); 

another alternative without "autoselect" send post ajax. in way can prepare sending data.

..or edit jquery this:

<script type="text/javascript">     $(document).ready(function() {         $("#and").click(function() {             $("#totalselect option:selected").appendto("#select-and");         });         $("#or").click(function() {             $("#totalselect option:selected").appendto("#select-or");         });         $("#removeand").click(function() {             $("#select-and option:selected")                 .removeattr("selected")                 .appendto("#totalselect");         });         $("#removeor").click(function() {             $("#select-or option:selected")                 .removeattr("selected")                 .appendto("#totalselect");         });     });     </script>