Preselect value in a dynamicaly created select box

Question

I have maybe a simple problem. I have two select boxes which are created dynamically by php. You can choose numbers in this fields. I want that in one select box the the smallest number is "pre"selected and in the other box the largest.

My Code:

$res_little=mysqli_query($db_link,"SELECT DISTINCT number FROM ... ORDER BY number ASC"); 
$res_large=mysqli_query($db_link,"SELECT DISTINCT number FROM ... ORDER BY number ASC");

<select name="little" id="little">
    <option></option>
        <?php
        while($row = mysqli_fetch_array($res_little))
            {
            echo "<option>";
            echo('<p>'.$row['number'].'</p>');
            echo "</option>";
            }
        ?>

</select>

<select name="large" id="large">
    <option></option>
        <?php
        while($row = mysqli_fetch_array(res_large))
            {
            echo "<option>";
            echo('<p>'.$row['number'].'</p>');
            echo "</option>";
            }
        ?>
</select>

Possible duplicate of [How can I set the default value for an HTML — skAstro, Feb 02 '17 at 09:02
No, because it's not static. The numbers in the field are changing so that the largest and the smallest number are diffrent from times to times. — etnobommel1989, Feb 02 '17 at 09:17

etnobommel1989 · Answer 1 · 2017-02-02T09:32:01.480

it should be like this:

$res_large=mysqli_query($db_link,"SELECT DISTINCT number FROM ... ORDER BY number ASC");  
$max_number=mysqli_query($db_link,"SELECT MAX(number) FROM ... ");  


<select name="large" id="large" value='max_number'>
       <option></option>
       <?php
       while($row = mysqli_fetch_array(res_large))
       {
            echo "<option selected='$max_number'>";
            echo('<p>'.$row['number'].'</p>');
            echo "</option>";
       }
       ?>
</select>

score 0 · Accepted Answer · answered Feb 02 '17 at 09:50

You can simple use Jquery ready function then add the selected attribute on the first option of the select dropdown.

$("selector option:first").attr('selected','selected'); this will make the first element of your dropdown selected.

then your code will look like :

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

<?php

$res_little=mysqli_query($db_link,"SELECT DISTINCT number FROM ... ORDER BY number ASC"); 
$res_large=mysqli_query($db_link,"SELECT DISTINCT number FROM ... ORDER BY number ASC");
?>

<select name="little" id="little">
            <?php
            while($row = mysqli_fetch_array($res_little))
                    {
                    echo "<option value=\"".$row['number']."\">".$row['number']."</option>";
                    }
            ?>

 </select>


<select name="large" id="large">
            <?php
            while($row = mysqli_fetch_array($res_large))
                    {
                    echo "<option value=\"".$row['number']."\">".$row['number']."</option>";
                    }
            ?>
</select>

<script type="text/javascript">
    $(document).ready(function(){

        $("#little option:first").attr('selected','selected');
        $("#large option:first").attr('selected','selected');

});

</script>

score 0 · Answer 3 · answered Feb 20 '17 at 13:18

Thank you this is the right way. But I forgot to say that select box has an onchange event. Like this:

<?php

$res_little=mysqli_query($db_link,"SELECT DISTINCT number FROM ... ORDER BY number ASC"); 
$res_large=mysqli_query($db_link,"SELECT DISTINCT number FROM ... ORDER BY number ASC");
?>

<select name="little" id="little" ***onchange="from_little(this.value)"***>
            <?php
            while($row = mysqli_fetch_array($res_little))
                    {
                    echo "<option value=\"".$row['number']."\">".$row['number']."</option>";
                    }
            ?>

 </select>


<select name="large" id="large" ***onchange="to_large(this.value)"***>
            <?php
            while($row = mysqli_fetch_array($res_large))
                    {
                    echo "<option value=\"".$row['number']."\">".$row['number']."</option>";
                    }
            ?>
</select>

<script type="text/javascript">
    $(document).ready(function(){

        $("#little option:first").attr('selected','selected');
        $("#large option:first").attr('selected','selected');

});

</script>

And so it should run at the same time these functions.

Preselect value in a dynamicaly created select box

3 Answers3