SELECT Input仅从数据库返回有限值

Question

This might sound odd but hopefully someone could figure out and help me with this.

I am retrieving a number of values from the MySql database. I have at least 300 rows in my database which is being exported to my JavaScript file. These values are presented as <option> in my <select> input. When I run my file, the <select> input did not return any <option> value.

I wonder what was going on and realize that there are a lot of values returned. So I put a limit on the SQL data and I concluded that the <select> input only returns a maximum of 13 values if there is no WHEREfunction in the php code and only 10 values if there is a WHERE function.

I did tried putting the data manually without retrieving data from database and it only accepts 25 values out of at least 300 values.

My questions are:

• Are there really limits on the data displayed in the <select> input? If there is, is there any way to bypass it? If none, what could have went wrong?

These are the codes in case you need it. I just simplified and remove few data to visualize what I mean.

HTML

<form action="" method="post" id="demo-form2" data-parsley-validate class="form-horizontal form-label-left">
    <div class="form-group">
    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="first-name">Search Topic
    </label>
    <div class="col-md-6 col-sm-6 col-xs-12">
    <select id="userDropdown" name="tid" class="select2_single form-control col-md-7 col-xs-12"></select>

    </div>
</div>
<div class="form-group">
    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="first-name">Description <span class="required">*</span>
    </label>
    <div class="col-md-6 col-sm-6 col-xs-12">
        <input type="text" id="description" name="description"  class="form-control col-md-7 col-xs-12" />
    </div>
</div>
<div class="form-group">
    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="first-name">Assigned to <span class="required">*</span>
    </label>
    <div class="col-md-6 col-sm-6 col-xs-12">
        <input type="text" id="assign" name="assign" class="form-control col-md-7 col-xs-12" />
    </div>
</div>
<div class="form-group">
    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="last-name">Comments: <span class="required">*</span>
    </label>
    <div class="col-md-6 col-sm-6 col-xs-12">
        <input type="text" id="comments" name="comments"   class="form-control col-md-7 col-xs-12">
    </div>
</div>

<div class="form-group">
    <label for="middle-name" class="control-label col-md-3 col-sm-3 col-xs-12">Words</label>
    <div class="col-md-6 col-sm-6 col-xs-12">
        <input id="words" class="form-control col-md-7 col-xs-12" type="text" name="words">
    </div>
</div>


  </div>
<div class="ln_solid"></div>
<div class="form-group">
    <div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3">
        <input type="submit" name="submit" class="btn btn-success" value="Update" />
    </div>
</div>

JAVASCRIPT

 <script>



    //sql data...
    var data = [   <?php
        $req = mysql_query('select * from tasks');
            while($dnn = mysql_fetch_array($req))
              {
              ?>  {username: '<?php echo $dnn['username'] ?>', tid: '<?php echo $dnn['tid'] ?>', description: '<?php echo $dnn['description'] ?>'},
    //this would return at least 300 results

<?php } ?>

    ];

    var dropdown = $('#userDropdown');
    dropdown.append('<option value="" >Search for Topic ID</option>');
    for(var i = 0; i < data.length; i++){
        var item = data[i];
        dropdown.append('<option value="' + item.tid + '" >' + item.tid + '-' + item.description + '</option>');
    }

    $('#userDropdown').change(function(){
        var user = this.value;
        var dataItem = $.grep(data, function(e){ return e.tid == user; });

        if(dataItem.length > 0){
            $('#description').val(dataItem[0].description);
            $('#assign').val(dataItem[0].assign);
            }
    });
    </script>

There is no problem with the code. I just included it for reference.

EDIT: Remove LIMIT on the php script to avoid confusion.

Answer 1

There is no limit to the <select> element. a more elegant way to do this job is to use the here-doc syntax in php like this :

var data = [
    <?php
        $req = mysql_query('select * from tasks');
        while($dnn = mysql_fetch_array($req, MYSQL_ASSOC)){
            echo <<<DATA
            {
                username : '{$dnn['username']}',
                tid : {$dnn['tid']},
                description : '{$dnn['description']}'
            }           
DATA;
        }
    ?>
];

also keep in mind that :

this javascript-php snippet should be embedded in the view parsed by php engine

you should not put it in an external asset that would load after parsing the view by php & loaded via browser.