SelectBox text

[gmc1103]

Hi

 

I'm having a problem with this code

<script>
                $(function(){
                    var items="";
                    $.getJSON("getSalas.php",function(data){
                    $.each(data,function(index,item) 
                          {
                            items+="<option value='"+item.idsala+"'>"+item.sala+"</option>";
                          });
                          $("#sala").html(items); 
                        });
                      });
                </script>

When the page load i would like to have the text

"Escolha a sala" (Choose a value)

 

I have this code in my htlm

<div class="form-group">
                            <label for="exampleInputPassword1">Sala</label>
                            <select class="form-control" id="sala" name="sala" onchange="verificaSala(this)">
                                <option selected="selected">Escolha a sala</option>            
                            </select>
                        </div>

But this text is not show....any help?

 

Thanks

[Psycho]

Why are you using JavaScript to populate the values of the select list? Can the list items dynamically change after the user has loaded the page? In any event, that's not how I typically see the values of a list changed. It could cause problems with pre-selected values and other scenarios. The problem is you are replacing the entire list with what is returned from getSalas.php. You will either need to 1) Change getSalas.php to return the "Choose a value" option in the list it returns or 2) Change the logic so getSalas.php returns an array of options, then use JavaScript to append those to the current list.

[gmc1103]

Hi

 

Thanks for your help

You said 

 Change getSalas.php to return the "Choose a value" option in the list it returns 

My getSalas.php is

<?php
error_reporting(E_ALL | E_NOTICE);
ini_set('display_errors', '1');
include 'conn.php';
mysql_query("SET NAMES 'utf8'");
$rs = mysql_query('SELECT `idsala`, `sala` FROM `ebspma_paad_ebspma`.`req_material_sala`;')or die ("Error in query: $rs. ".mysql_error());
$rows = array();
while(($row = mysql_fetch_assoc($rs))) {
     $rows[] = $row;
}
    echo json_encode($rows);
?>

How can i do this?

[Psycho]

On second thought, it would be better to add it to the JavaScript that builds the new options. Just set that option in the code before the new options are appended. But, I'm still not understanding why you are creating the initial values in JavaScript instead of the back-end code.

 

 

<script>
    $(function(){
        var items = '<option selected="selected">Escolha a sala</option>';
        $.getJSON("getSalas.php",function(data){
            $.each(data,function(index,item) 
            {
                items += '<option value="'+item.idsala+'">'+item.sala+'</option>';
            });
            $("#sala").html(items); 
        });
    });
</script>

[gmc1103]

Done

 

You said

 

But, I'm still not understanding why you are creating the initial values in JavaScript instead of the back-end code.

 

What do you mean by that??

 

Thanks for your help.

[CroNiX]

He means why are you using javascript to built the options rather than having them directly populated by php when creating the form view.

[gmc1103]

I do that with getSalas.php?

Never did, i need one example can you show me one?

 

Regards and Thank you

[CroNiX]

But why do you need the extra step of an ajax call to do that when you could just build the options with the same data getSalas.php is doing to begin with? The only time I'd do it the way you are is if the options need to change from their original values at some point, like they select something in SELECT box A, which changes the results available in SELECT box B.

[Psycho]

You said

 

But, I'm still not understanding why you are creating the initial values in JavaScript instead of the back-end code.

 

What do you mean by that??

 

In your original post you stated you have this code in the page

 

<div class="form-group">
    <label for="exampleInputPassword1">Sala</label>
    <select class="form-control" id="sala" name="sala" onchange="verificaSala(this)">
        <option selected="selected">Escolha a sala</option> 
    </select>
</div>

 

You also showed JavaScript code that is apparently executed on page load to do a call to a server-side page to get the list of values to populate the select list. That is inefficient. Just put the PHP code in the page that is called to build the select list rather than sending the user a page and then having to make a subsequent JavaScript call. In other words, you can do it all in the main page without having to do another server-side call (no JavaScript required)

 

 

<?php
error_reporting(E_ALL | E_NOTICE);
ini_set('display_errors', '1');
include 'conn.php';
mysql_query("SET NAMES 'utf8'");
 
//Execute query to get list of sala values
$query = 'SELECT `idsala`, `sala` FROM `ebspma_paad_ebspma`.`req_material_sala`;';
$result = mysql_query($query)or die ("Error in query: $rs. ".mysql_error());
 
//Create HMTL output for list of sala options
$salaOptions = "<option selected='selected'>Escolha a sala</option>\n"; //Set default value
while($row = mysql_fetch_assoc($result)) {
     $salaOptions .= "<option value='{$row['idsala']}'>{$row['sala']}</option>\n";
}
 
?>
 
<!-- HTML content before select list goes here -->
 
<div class="form-group">
    <label for="exampleInputPassword1">Sala</label>
    <select class="form-control" id="sala" name="sala" onchange="verificaSala(this)">
        <?php echo $salaOptions; ?>
    </select>
</div>

[gmc1103]

It works like a charm

 

Thank you for your example and help

 

Best regards