I am using the Selectize jQuery plugin and would like to populate the dropdown box with the results of a PHP output. I am able to get the data in the box, but there are multiple options and it is putting them all on one line instead of separate options. Any ideas?
jQuery
$("#SearchForm_1").submit(function() {
$.post($(this).attr("action"),
$(this).serialize(),
function(data) {
var selectize_tags = $("#GameDetails_1")[0].selectize;
selectize_tags.addOption({
text:data,
value: data
});
selectize_tags.addItem(data);
});
);
});
$('#GameDetails_1').selectize({
selectOnTab:true
});
HTML
<div class="control-group">
<select id="GameDetails_1" name="GameDetails_1" autocomplete="false">
</select>
</div>
PHP Output
echo $query_result['GameTitle'];
So simple ?
<div class="control-group">
<select id="GameDetails_1" name="GameDetails_1" autocomplete="false">
<?php echo '<option value="">' . $query_result['GameTitle'] . '</option>'; ?>
</select>
</div>
You are using Selectize jQuery plugin, and fetching records from database via Ajax.
and PHP output you are trying is echo $query_result['GameTitle'];
which only obiviously print the result in one line, what you need is to put the $query_result['GameTitle']
inside the <option></option>
tags to pupulate the element
so the PHP Output will be
echo "<option value='".$query_result['GameTitle']."'>".$query_result['GameTitle']."</option>";
and will populate <option></option>
tags inside select
element
<div class="control-group">
<select id="GameDetails_1" name="GameDetails_1" autocomplete="false">
</select>
</div>