We Keep Coding

How to give id to auto generated element automatically

I want to make a dropdownlist that contains something from my database, all going well until I need to give each of the option unique id
<div class="div3" >
<select id="input2" class="drop" name="a" required>
<option value="" selected disabled>a</option>
<?php while ($row1 = mysqli_fetch_array($result)) :; ?>
<option class="option"><?php echo $row1[0]; ?></option>
<?php endwhile; ?>
</select>
</div>

Put an id unique value in option tag, and order you code for make an array with html tag, for example if $row1[0] = uniqueid and $row1[1] = name
<?php while ($row1 = mysqli_fetch_array($result)){?>
<option id="<?php echo $row1[0]; ?>" class="option"><?php echo $row1[1]; ?></option>
<?php }?>
Best Regards

how to hide original dropdown list in select2

I want to use select2 for my dropdown list. The options are from a database query. What I got is there are two dropdown lists showing. The first one is the original dropdown and the second is using select2.
The select code is:
<select name="city" id="select-city" class="form-control">
<option></option>
<?php foreach ($cities as $ct) : ?>
<option value="<?php echo $ct->id ?>"><?php echo $ct->name ?></option>
<?php endforeach; ?>
</select>
And the javascript is:
<script>
$(document).ready(function () {
$("#select-city").select2();
});
</script>
I want to hide the original dropdown. How can I do this?

How to trigger onChange event dynamically using javascript and PHP

I need one help.i am fetching data from my DB ,i need when data has fetched one Javascript function will called through onChange event.Let me to explain my code.
<?php
$id=$_GET['ids'];
if($id!=""){
$getcustomerobj = $dbobj->getFeedbackData($db,$id);
}
?>
<div style="width:24%; float:left; padding:10px;">Answer Type :
<select class="form-control" id="answer_type" name="answer_type" onChange="selectScale(this.value);">
<option value="">Select Answer Type</option>
<?php
$ustatus=array("status"=>'1');
$feeddata=$db->kf_answertype->find($ustatus);
foreach($feeddata as $v){
?>
<option value="<?php echo $v['_id']; ?>" <?php if($getcustomerobj->answer_type == $v['_id'] or $_REQUEST['answer_type'] == $v['_id']){ print 'selected'; } ?>><?php echo $v['answertype']; ?></option>
<?php } ?>
</select>
</div>
<div style="width:24%; float:left; padding:10px; display:none;" id="scaleid">Scale :
<select class="form-control" id="nscale" name="noofscale">
<option value="">Select No Of Scale</option>
<?php
$status=array("status"=>'1');
$feeddata=$db->kf_scale->find($ustatus);
foreach($feeddata as $v){
?>
<option value="<?php echo $v['_id']; ?>" <?php if($getcustomerobj->no_of_scale == $v['_id'] or $_REQUEST['no_of_scale'] == $v['_id']){ print 'selected'; } ?>><?php echo $v['noofscale']; ?></option>
<?php } ?>
</select>
</div>
<script>
function selectScale(id){
console.log('select scale',id);
var data=$.param({'op':'getscale','sid':id});
$.ajax({
method:'POST',
url:"dbcon/DBConnection.php",
data:data
}).done(function(msg){
//console.log('msg',msg);
var dedata=JSON.parse(msg);
//console.log('decode',dedata);
if(dedata[0]['data']==1){
document.getElementById("scaleid").style.display="block";
}
if(dedata[0]['data']==0){
document.getElementById("scaleid").style.display="none";
}
});
}
</script>
Here I need when data are fetching from DB the Answer Type drop down field will set with some value.As the second drop down list(i.e-Scale) is depends on first drop down, i need to call selectScale function which has triggered using onChange event.Please help me.

I think you can call onchange event for your first drop-down on document ready so based on this your second drop-down value will be selected.
$(document).ready(function(){
$("#answer_type").trigger("change");
});
may be this is helpful for you.

As what i have understood ,what you need is simply add this line to your java script
selectScale($('#answer_type').val());
Also this solution could work, by triggering change function using jQuery
$("#answer_type").trigger("change");

How to remove an empty string from an array. I am not sure weather it is from PHP or Ajax

I am using Ajax in order to display drop-down list when a product group is selected. My Ajax returns a list from the query page(dropd.php). However the problem is the array consists of some empty space between each element. Hence when I did inspect in chrome below is the output I am getting,
<option value="1">Gear pumps</option>
<option></option>
<option value="2">Piston pumps</option>
<option></option>
How could I remove "<option></option>" from the drop-down list? If I take option tag out from html what I receive is;
Gear pumps^piston pumps^vane pumps...etc
If you can notice the space(^).
Ajax code
<script>
$(document).ready(function(){
$('#sel1').on('change', function(){
$.post("dropd.php",{vals:$("#sel1 option:selected").text()},
function(data){$.trim($("#sel2").html( data ));});
});
});
</script>
dropd.php
<?php
require('../config/connection.php');
if($_POST['vals']){
$values = mysqli_real_escape_string($dbc,$_POST['vals']);
$query = "SELECT * FROM prdct_categories WHERE product = '$values'";
$result = mysqli_query($dbc, $query);
?>
<option value="">Select subgroup</option>
<?php
foreach($result as $row)
{ ?>
<option value="<?php echo $row['id']; ?>"><?php echo $row['subgroup']; ?><option/>
<?php
}
}
mysqli_close($dbc);
?>
Ajax data goes here
<div class="form-group">
<label for="inputsubprdctgrp" class="col-sm-4 control-label" >Product Subgroup</label>
<div class="col-sm-8">
<select class="form-control" id="sel2" >
</select>
</div>
</div>
Thanks in advance.

There may be 2 issues:
The SQL result gives an empty value which can be fixed by using the array_filter() method:
$new_result = array_filter($result);
You wrote option/ instead of **/option
Hope this helps :)

just dont put those values in options if it is blank..
you can use below code.
$result = mysqli_query($dbc, $query);
?>
<option value="">Select subgroup</option>
<?php
foreach($result as $row)
{
if(trim($row['subgroup'])!=''){
?>
<option value="<?php echo $row['id']; ?>"><?php echo $row['subgroup']; ?><option/>
<?php
}
}
mysqli_close($dbc);
?>

Just use `
$('#sel2').find('option:empty').remove();`
after you load content from ajax,
if you want to do it in javascript, otherwise avoid it in PHP in the first place.

How to disable drop down option if present in DB

I have a drop down menu that is populated by an array. The goal is to have each value selected only once in the drop down to prevent duplicate column values.
I found some javascript that will disable each value after its selected, but if you reload the page, nothing is greyed out in the drop down (obviously).
How would I compare the array values with the database to disable values that are already selected in all the rows on load?
$(function(){
$('select').change(function() {
$current=$(this);
$("select").not($current).children(
"option[value='" + $current.val() + "']"
).attr('disabled', "disabled");
});
});
Drop Down Menu
<td>
<div class="grid_content editable">
<span><?php echo $records['equipment']; ?></span>
<select class="gridder_input select"
name="<?php echo encrypt("equipment|".$records['id']); ?>">
<?php
foreach($equipment as $equipments) {
?>
<option value="<?php echo $equipments; ?>"
<?php
if($equipments == $records['equipment']) {
echo 'selected="selected"';
}
?>>
<?php echo $equipments; ?>
</option>
<?php
}
?>
</select>
</div>
</td>
Is there an easier way to do this than what I've suggested? I think the closest solution I've found would work something like
$("select option:contains('Value')").attr("disabled","disabled");
Where value would be replaced with something that checks the DB. Or something like the answer found here using an if else statement