javascript - Optimal way to auto select option from select drop down after submit - Stack Overflow

admin管理员组

文章数量:1332339

The problem I am running into is, when the form is submitted, the user's dropdown selections are lost and I would like the dropdown menu selections to be auto selected on load, after submit (form posts to the same page as it is submitted from), based on the users drop down selections.

I was wondering what is the simplest way to use the posted $_POST values, from <select> elements to auto select the corresponding options from the select drop downs.

This is what I tried, with no success:

<select name="filter1" value="<?php echo isset($_POST['filter1']) ? $_POST['filter1'] : ""; ?>">
    <?php echo getFilterOptions(); ?>
</select>

Note: I'm looking for the easiest way to do this. I am open to using JQuery, JavaScript, or PHP for the solution. If possible, I would like to not hard code anything into the options, because those are auto generated using mySQL / PHP.

The problem I am running into is, when the form is submitted, the user's dropdown selections are lost and I would like the dropdown menu selections to be auto selected on load, after submit (form posts to the same page as it is submitted from), based on the users drop down selections.

I was wondering what is the simplest way to use the posted $_POST values, from <select> elements to auto select the corresponding options from the select drop downs.

This is what I tried, with no success:

<select name="filter1" value="<?php echo isset($_POST['filter1']) ? $_POST['filter1'] : ""; ?>">
    <?php echo getFilterOptions(); ?>
</select>

Note: I'm looking for the easiest way to do this. I am open to using JQuery, JavaScript, or PHP for the solution. If possible, I would like to not hard code anything into the options, because those are auto generated using mySQL / PHP.

• javascript
• php
• jquery

Share Improve this question Follow asked Nov 6, 2013 at 16:55 AnchovyLegendAnchovyLegend 12.5k4141 gold badges152152 silver badges240240 bronze badges 7

• It does not work for some reason, values are not set. – AnchovyLegend Commented Nov 6, 2013 at 17:02
• Yes, filter1 is SET! I don't believe you can set the default value directly from the select tags however. This must be done from the option tags. – AnchovyLegend Commented Nov 6, 2013 at 17:03
• 1 Strike that, try doing this -> jsfiddle/d96dc/1 – adeneo Commented Nov 6, 2013 at 17:11
• LOL see, you can't set value directly from the select tags! ;) – AnchovyLegend Commented Nov 6, 2013 at 17:20
• Nope, I was sure you could, but you have to set the selects value with javascript, for some stupid reason just setting it in the markup does work – adeneo Commented Nov 6, 2013 at 18:14

 |  Show 2 more ments

6 Answers 6

Sorted by: Reset to default 2

You can do it like this :

<select name="filter1">
    <option value="test1">test 1</option>
    <option value="test2">test 2</option>
</select>

<script>
    document.getElementsByName('filter1')[0].value = '<?php echo $_POST['filter1']; ?>'
</script>

Select input values are set this way:

<select name="filter1">
  <option value="red">Red</option>
  <option value="green" selected="selected">Green</option>
  <option value="blue">Blue</option>
</select>

with the Green option selected.

In your getFilterOptions function you should loop through your options and for each option pare to post value of field name filter1:

<select name="filter1">
<?php echo getFilterOptions("filter1"); ?>
</select>

<?php 
function getFilterOptions($fieldName) {

  $options = array("red" => "Red", "green" => "Green", "blue" => "Blue"); // Assuming these are your database extracted options
  $select = "";
  $isSetField = isset($_POST[$fieldName]) ? true : false;


  foreach($options AS $value => $name) {
    $select .= '<option value="' . $value . '" ' . ($isSetField && $value == $_POST[$fieldName] ? 'selected="selected"' : '') . '>' . $name . '</option>';
  }
  return $select;
}
?>

You have to include the selected="selected" attribute on the option that is to be selected. Passing $_POST['filter1'] to getFilterOptions and checking it against the current option you are outputting would be my suggestion.

Try

set id in html of select and use

JavaScript to select value in drop-down-list

<script>
function setSelectedValue(selectObj, valueToSet) {
    for (var i = 0; i < selectObj.options.length; i++) {
        if (selectObj.options[i].value == valueToSet) {
            selectObj.options[i].selected = true;
            return;
        }
    }
}
var objSelect1 = document.getElementById('filter1');
setSelectedValue(objSelect1, "<?php $_POST['filter1']; ?>");
</script>

Usage

setSelectedValue(objSelect1,Value);

Loop through the values and select=selected on the value stored in _POST:

<?php
$dropdownFilter1= array("Dog","Cat","Fox");
echo "<select>";
foreach($dropdownFilter1 as $selectOption){
  $select = ($selectOption == $_POST['filter1'])? "selected='selected'":"";
  echo "<option $select>$selectOption</option>";
}
echo "</select>";

Just thinking out loud.

$isSelected = "";
$value = $_POST['filter1'];

...so you need to generate the drop down something like this:

echo "<select id='drop-down' name='filter1'>";

for($i=0; $i<=count($dropDownValues); $i++) {

     if ($value==$i) $isSelected="selected='selected'";

     echo "<option value='$i' $isSelected >$i</option>";

}

... I did not test this but it should work. Obviously this is missing all the $_POST validation bells&whistles etc...

本文标签： javascriptOptimal way to auto select option from select drop down after submitStack Overflow