如何将选择/下拉值传递给表格2？

Question

I'm trying to pass the selected dropdown value to another form.

Form 1 :

<form role="form" action="form2.php" method="get">
    <div class="form-group select one-third">
        <label>destination</label>
        <select name="destination">
            <option selected>&nbsp; Choose a destination</option>
            <optgroup label="Country 1">
            <option value="Des 1">Des 1</option>
            <option value="Des 2">Des 2</option>
            </optgroup>
            <optgroup label="Country 2">
            <option value="Des 3">Des 3</option>
            <option value="Des 4">Des 4</option>
            </optgroup>
        </select>
    </div>
</form>

Form 2 :

<form role="form">
    <div class="form-group select one-third">
        <label>destination</label>
        <select name="destination"/>
            <option selected>&nbsp; Choose a destination</option>
            <optgroup label="Country 1">
            <option value="Des 1">Des 1</option>
            <option value="Des 2">Des 2</option>
            </optgroup>
            <optgroup label="Country 2">
            <option value="Des 3">Des 3</option>
            <option value="Des 4">Des 4</option>
            </optgroup>
        </select>
    </div>
</form>

I tried with value="<?php echo $_GET['vertrek']; ?>" but this doesn't work. Can I do it without using jquery? How can I pass the selected dropdown value to form 2?

Thanks in advance.

Answer 1

To pre-select an option in dropdown you can use

<option value='the_value' <?php ($_GET['destination']=='the_value')?"selected":""?> >Text to be displayed</option>

This will check whether the selected value (from form one) matches with the value of an option, if yes, that option will be selected.

Form1.php

<form role="form" action="form2.php" method="get">
    <div class="form-group select one-third">
        <label>destination</label>
        <select name="destination">
            <option selected>&nbsp; Choose a destination</option>
            <optgroup label="Country 1">
            <option value="Des 1">Des 1</option>
            <option value="Des 2">Des 2</option>
            </optgroup>
            <optgroup label="Country 2">
            <option value="Des 3">Des 3</option>
            <option value="Des 4">Des 4</option>
            </optgroup>
        </select>
    </div>
<div><input type='submit' value='Submit'/></div>
</form>

Form 2.php

<?php 
$selected_option = "";
if(isset($_GET) && !empty($_GET)){
    $selected_option = $_GET['destination'];
}
?>
<form role="form">
    <div class="form-group select one-third">
        <label>destination</label>
        <select name="destination"> <1-- removed a back slash here -->
            <option selected>&nbsp; Choose a destination</option>
            <optgroup label="Country 1">
            <option value="Des 1" <?php echo ($selected_option =='Des 1')?"Selected":"";?>>Des 1</option>
            <option value="Des 2" <?php echo ($selected_option =='Des 2')?"Selected":"";?>>Des 2</option>
            </optgroup>
            <optgroup label="Country 2">
            <option value="Des 3" <?php echo ($selected_option =='Des 3')?"Selected":"";?>>Des 3</option>
            <option value="Des 4" <?php echo ($selected_option =='Des 4')?"Selected":"";?>>Des 4</option>
            </optgroup>
        </select>
    </div>
</form>

Answer 2

First You remove the slash from <select/> in form 2

then it's not working, just try it,

Form.php

<form role="form" action="form1.php" method="get">
    <div class="form-group select one-third">
        <label>destination</label>
        <select name="destination">
            <option selected>&nbsp; Choose a destination</option>
            <optgroup label="Country 1">
            <option value="Des 1">Des 1</option>
            <option value="Des 2">Des 2</option>
            </optgroup>
            <optgroup label="Country 2">
            <option value="Des 3">Des 3</option>
            <option value="Des 4">Des 4</option>
            </optgroup>
        </select>
    </div>
    <input type="submit" value="submit"/>
</form>

form1.php

<?php 
$des = '';
if(isset($_GET['destination'])){ $des = $_GET['destination'];
} ?>
<form role="form" action="form2.php" method="get">
    <div class="form-group select one-third">
        <label>destination</label>
        <select name="destination">
            <option>&nbsp; Choose a destination</option>
            <optgroup label="Country 1">
            <option value="Des 1" <?php if($des == "Des 1"){ echo "selected";} ?>>Des 1</option>
            <option value="Des 2" <?php if($des == "Des 2"){ echo "selected";} ?>>Des 2</option>
            </optgroup>
            <optgroup label="Country 2">
            <option value="Des 3" <?php if($des == "Des 3"){ echo "selected";} ?>>Des 3</option>
            <option value="Des 4" <?php if($des == "Des 4"){ echo "selected";} ?>>Des 4</option>
            </optgroup>
        </select>
    </div>
</form>

This will help to achieve what you want!!

Answer 3

With jQuery (client side):

$(document).ready(function(){
    $("#form1 [name='destination']").change(function(){
        $("#form2 [name='destination']").val($(this).val())
    });
});

Demo