I'm trying to have some options start as selected when using a selectize multiselect. I'm pulling some info from a database using PHP then converting the info to a JS array. When I try to "initialize the Selectize control" I get an error saying ReferenceError: options is not defined. What can I do to add items to my multiselect?
<?
//Query
$courseQuery = $page->dbf->query("SELECT * FROM courses");
$curCourses = $page->dbf->query("SELECT * FROM recipesToCourse WHERE recipeId = '$recID'");
$course = [];
while($crs = $courseQuery->fetch_object()) {
$course[$crs->id] = $crs->title;
}
$jsCourse = json_encode($course);
$crsList = [];
while($cr = $curCourses->fetch_object()) {
$crsList[] = $cr->courseId;
}
$jsCrsList = json_encode($crsList);
?>
<script>
//Enable multiselect
$('#course').selectize({
maxItems: 10
});
</script>
<select id="course" name="course[]" multiple>
<option value="">-- Select Courses --</option>
<?
foreach($course as $key=>$value) {
?>
<option value="<?=$key?>"><?=$value?></option>
<?
}
?>
</select>
<script>
var courses = '<?echo $jsCourse?>';
courses = JSON.parse(courses);
var crsList = '<?echo $jsCrsList?>';
crsList = JSON.parse(crsList);
// initialize the Selectize control !!My ERROR!!
var $select = $('#course').selectize(options);
// fetch the instance
var selectize = $select[0].selectize;
index = 0;
var select = document.getElementById('course');
for(var i = 1; i < Object.keys(courses).length + 1; i++) {
console.log('checking...');
if(crsList[index] == i) {
console.log('adding');
selectize.addItem(courses[i]);
index++;
}
}
</script>
Related
I have 2 select's. I want to move items between them. They should be sorted. I grabbed some code from SO, and am experiencing something weird. When I pass the element as a parameter to the sort function, it doesn't work. When I explicitly get the element in the sort function it works perfectly. Look at the first line in the sort function and you'll see what I'm talking about.
Here's my PHP part.
echo "
<div><select id='listBox1' class='form-control select-manage-category' size='5'>
<option value=1>1-text</option>
<option value=2>2-text</option>
<option value=3>3-text</option>
<option value=4>4-text</option>
</select></div>
<input id='add-category' onclick='ClickAdd()' name='add' type='button' value='Add Item'>
<input id='remove-category' onclick='ClickRemove()' name='add' type='button' value='Remove Item'>
<div>
<select id='listBox2' class='form-group percent-100' size='5'></select>
</div>
";
echo "<script>";
include 'bstest.js';
echo "</script>";
And, this is my JS (bstest.js).
function ClickAdd()
{
// get the 'left' listbox.
var e = document.getElementById('listBox1');
// get the text and value of selected item.
var eText = e.options[e.selectedIndex].text;
var eVal = e.value;
// create the new element
var opt = document.createElement('option');
opt.text = eText;
opt.value = eVal;
// add it to the 'right' listbox.
document.getElementById('listBox2').options.add(opt);
// now remove it from the 'left' list.
value = e.selectedIndex;
e.removeChild(e[value]);
sortSelect(e);
}
function ClickRemove()
{
// get the 'right' listbox.
var e = document.getElementById('listBox2');
// get the text and value of selected item.
var eText = e.options[e.selectedIndex].text;
var eVal = e.value;
// create the new element
var opt = document.createElement('option');
opt.text = eText;
opt.value = eVal;
// add it to the 'left' listbox.
document.getElementById('listBox1').options.add(opt);
// now remove it from the 'right' list.
value = e.selectedIndex;
e.removeChild(e[value]);
sortSelect(e);
}
function sortSelect(selectToSort)
{
//selectToSort = document.getElementById('listBox1'); // works. If I comment it, it doesn't work.
var arrOptions = [];
for (var i = 0; i < selectToSort.options.length; i++)
{
arrOptions[i] = [];
arrOptions[i][0] = selectToSort.options[i].value;
arrOptions[i][1] = selectToSort.options[i].text;
arrOptions[i][2] = selectToSort.options[i].selected;
}
arrOptions.sort();
for (var i = 0; i < selectToSort.options.length; i++)
{
selectToSort.options[i].value = arrOptions[i][0];
selectToSort.options[i].text = arrOptions[i][1];
selectToSort.options[i].selected = arrOptions[i][2];
}
return;
}
How can I refresh second select option when first select option is changed?
I am generating the array here for patient_code2:
//GENERATE NUMBERS FOR CYCLE
function patsient(selector) {
var i;
for (i = 1; i <= 99; i++) {
var text = '0' + i;
selector.options[i - 1] = new Option(text.substr(text.length - 2, 2));
}
}
patsient(document.getElementById("patient_code2"));
I am generating the array for patient_code here:
function myFunction(selector) {
var i;
for (i = 1; i <= 999; i++) {
var text = '00' + i;
selector.options[i - 1] = new Option(text.substr(text.length - 3, 3));
}
}
//usage:
myFunction(document.getElementById("patient_code"));
Here I am inserting the last value from database to the field:
//INSERT THE VALUE FROM DATABASE
var tsykkel_id = '<?php foreach ($tsykkel_id as $row){echo $row['patsiendi_tsykkel'];}?>';
$('#patient_code2')[0].options[parseInt(tsykkel_id)].selected = true;
$(document).ready().on('change', '#patient_code2', function () {
var index = $('option:selected', $(this)).index();
$('option', $(this)).each(function (i, x) {
if (i < index) { $(this).remove(); }
});
});
HTML
<select name="patient_code" data-placeholder="" id="patient_code" class="chosen-select form-control" tabindex="2">
</select>
<label class="control-label">Tsükkel:</label>
<select name="patient_code2" data-placeholder="" id="patient_code2" class="chosen-select form-control" tabindex="2">
</select>
So lets say that person chooses 002 from the first then the second should start from 01 again.
try this then. Code is tested.
$(document).ready().on('change','#patient_code2',function(){
var index = $('option:selected',$(this)).index();
$('option',$(this)).each(function(i,x){
if(i<index){$(this).remove();}
});
$('select#patient_code').prop('selectedIndex', 0);
});
fiddle : http://jsfiddle.net/roullie666/69j94ro6/2/
You can just start printing after the match has been found. I am writing both ways since you asked?
For javascript version use roullie's no point duplicating.
<?php
$flag = false;
foreach ($tsykkel_id as $row) {
if ($selected) {
$flag = true;
}
if ($flag) {
$row['patsiendi_tsykkel'];
}
}?>
I have multiple dropdown lists on my PHP page and all are created like this:
<?php
//Select values from MySQL Database
$query = "SELECT name FROM Player";
$result = mysql_query($query);
//Show DropDownList
echo '<select name="players" onclick="sortlist(this)">';
while($row = mysql_fetch_assoc( $result ))
{
echo '<option value="'.$row['name'].'">' . $row['name'] . '</option>';
}
echo '</select>';
?>
Now in case you haven't noticed I call a javascript function "sortlist(this)" on every dropdownlist i have. This function just order values alphabetically. You can check the script:
<script>
function sortlist(selElem) {
var tmpAry = new Array();
for (var i=0;i<selElem.options.length;i++) {
tmpAry[i] = new Array();
tmpAry[i][0] = selElem.options[i].text;
tmpAry[i][1] = selElem.options[i].value;
}
tmpAry.sort();
while (selElem.options.length > 0) {
selElem.options[0] = null;
}
for (var i=0;i<tmpAry.length;i++) {
var op = new Option(tmpAry[i][0], tmpAry[i][1]);
selElem.options[i] = op;
}
return;
}
</script>
All my dropdownlists are inside a form tag like this:
<form accept-charset="utf-8" action="" method="post">
The script is running ok, i have the dropdownlist ordered alphabetically, but whenever i select one value, it always shows the first one.
try something like this
<body>
<select id="select_id" >
<option value="B">B</option>
<option value="Z">Z</option>
<option value="C">C</option>
<option value="E">E</option>
<option value="A">A</option>
</select>
</body>
<script type="text/javascript">
function sortlist(selElem) {
var tmpAry = new Array();
for (var i=0;i<selElem.options.length;i++) {
tmpAry[i] = new Array();
tmpAry[i][0] = selElem.options[i].text;
tmpAry[i][1] = selElem.options[i].value;
}
tmpAry.sort();
while (selElem.options.length > 0) {
selElem.options[0] = null;
}
for (var i=0;i<tmpAry.length;i++) {
var op = new Option(tmpAry[i][0], tmpAry[i][1]);
selElem.options[i] = op;
}
return;
}
sortlist(document.getElementById('select_id'));
</script>
REASON: your script always sorting your select on onclick no matter whether you are selecting value it is sorting and reseting your selected value.
so call your script only once for sorting after you have render your select element
Why not just
$query = "SELECT name FROM Player ORDER BY name ASC";
How about this
function sortlist(elem) {
arrTexts = new Array();
for(i=0; i<elem.length; i++) {
arrTexts[i] = elem.options[i].text;
}
arrTexts.sort();
for(i=0; i<elem.length; i++) {
elem.options[i].text = arrTexts[i];
elem.options[i].value = arrTexts[i];
}
}
I'm using the following function to move data between two select fields:
<script language="javascript">
function move(tbFrom, tbTo)
{
var arrFrom = new Array(); var arrTo = new Array();
var arrLU = new Array();
var i;
for (i = 0; i < tbTo.options.length; i++)
{
arrLU[tbTo.options[i].text] = tbTo.options[i].value;
arrTo[i] = tbTo.options[i].text;
}
var fLength = 0;
var tLength = arrTo.length;
for(i = 0; i < tbFrom.options.length; i++)
{
arrLU[tbFrom.options[i].text] = tbFrom.options[i].value;
if (tbFrom.options[i].selected && tbFrom.options[i].value != "")
{
arrTo[tLength] = tbFrom.options[i].text;
tLength++;
}
else
{
arrFrom[fLength] = tbFrom.options[i].text;
fLength++;
}
}
tbFrom.length = 0;
tbTo.length = 0;
var ii;
for(ii = 0; ii < arrFrom.length; ii++)
{
var no = new Option();
no.value = arrLU[arrFrom[ii]];
no.text = arrFrom[ii];
tbFrom[ii] = no;
}
for(ii = 0; ii < arrTo.length; ii++)
{
var no = new Option();
no.value = arrLU[arrTo[ii]];
no.text = arrTo[ii];
tbTo[ii] = no;
}
}
</script>
main php page
<?php
mysql_select_db($database_UARData, $UARData);
$query_DistributionGroups = "SELECT distgrp.distgrpnme FROM distgrp";
$DistributionGroups = mysql_query($query_DistributionGroups, $UARData) or die(mysql_error());
$row_DistributionGroups = mysql_fetch_assoc($DistributionGroups);
$totalRows_DistributionGroups = mysql_num_rows($DistributionGroups);
?>
<select name="newusrdgavail" size="10" id="newusrdgavail" style="width:300px">
<?php
do {
?>
<option value="<?php echo $row_DistributionGroups['distgrpnme']?>"><?php echo $row_DistributionGroups['distgrpnme']?></option>
<?php
} while ($row_DistributionGroups = mysql_fetch_assoc($DistributionGroups));
$rows = mysql_num_rows($DistributionGroups);
if($rows > 0) {
mysql_data_seek($DistributionGroups, 0);
$row_DistributionGroups = mysql_fetch_assoc($DistributionGroups);
}
?>
</select>
</label></td>
<td align="center" bgcolor="#CCCCCC"><p>
<input type="button" name="newusrdgadd" id="newusrdgadd" value="Add" onclick="move(newusrdgavail,newusrdgreq)"/>
</p>
<p>
<input type="button" name="newusrdgremove" id="newusrdgremove" value="Remove" onclick="move(newusrdgreq,newusrdgavail)"/>
</p></td>
<td bgcolor="#CCCCCC"><label>
<select name="newusrdgreq" size="10" multiple="multiple" id="newusrdgreq" style="width:300px">
</select>
</label></td>
The move function works well and the moved values show in the correct field on the form. The problem is when I go to php submit:
$newusrdgreq = $_POST['newusrdgreq'];
$email_message .= "Required Email Distribution Groups: ".$newusrdgreq."\n";
I get the Notice: Undefined Index. On this field only. Everything else submits just fine. I know I can use the isset function to avoid empty or null values. However I think the great issue is that the "newusrdgreq" field is not getting the added and removed values properly attached to the field, but I cannot see why. Any help would be appreciated.
problem here that SELECT has only one value, even if you set it multiple - user must select all values manually, so basically all you items in select box - are not sending back to server
to fix this you can have 2 options:
create hidden field were you will duplicate data from select box
before submit - select all values in SELECT
I create option dynamically. I bind the all values but when I select value from dropdown menu it not display in the combo box.
help me how to fix this. thanks in advance
HTML:
<select name= "cityNameOption" id = "cityNameOption" >
<option value="0">All</option></select>
js:
// cityList = [{"id":3,"name":"Hospitals"},{"id":1,"name":"Hotels"},{"id":2,"name":"Shopping Mall"}];
var cityObject = jQuery.parseJSON(cityList);
var cityOptions = document.getElementById("cityNameOption");
for ( var i = 1; i <= cityObject.length; i++) {
cityOptions.options[i] = new Option(cityObject[i - 1].name, cityObject[i - 1].id);
}
Try this:
<select name= "cityNameOption" id = "cityNameOption" >
<option value="0">All</option>
</select>
<script type="text/javascript">
//warning 1: js-code must be after HTML
//warning 2: JSON-object must be as a string;
var cityList = '[{"id":3,"name":"Hospitals"},{"id":1,"name":"Hotels"},{"id":2,"name":"Shopping Mall"}]';
var cityObject = $.parseJSON(cityList);
for ( var i = 1; i <= cityObject.length; i++) {
$("#cityNameOption").append('<option value='+cityObject[i - 1].id+'>'+cityObject[i - 1].name+'</option>');
}
</script>