We Keep Coding

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 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

Reduce dropdown width in select element

The dropdown list takes the width of the longest value, which in my case is pretty long. I want to reduce the width of the dropdown list to the width of the select box itself (70% in my case). Have tried a no. of options in various other StackOverflow questions, but I haven't been able to solve this.
Select box code:
<select id="college" name="college" placeholder="College Name">
<option name="">{{ user.college.name }}</option>
{% for college in colleges %}
<option class="colleges" value="{{ college.url }}" name="college">{{ college.name }}</option>
{% endfor %}
</select>

you can try a few things:
set a fixed width to your select
use title in your option
use 3rd apps
set a fixed width to your select
select {
width:75px; /*whatever you want*/
}
<select name="college" id="college">
<option value="small">small</option>
<option value="normal text">normal text</option>
<option value="long text option">long text option</option>
<option value="very long text option">very long text option</option>
</select>
use title in your option
select {
width:75px; /*whatever you want*/
}
<select name="college" id="college">
<option value="1" title="small">1</option>
<option value="2" title="normal text">2</option>
<option value="3" title="long text option">3</option>
<option value="4" title="very long text option">4</option>
</select>
use 3rd apps
You can choose a few that are available.. just going to give a couple of examples:
Select2
jQtransform
UPDATE:
Notes: The dropdown width can't be set. It's width depend on the options values

Quite a late answer and possibly not 100% what you were looking for:
The dropdown width of my select-element covered nearly half the width of the screen.
It looks like the width of the dropped-down list is being controlled by the number of characters between
<option><?php SOME PHP-CODE ?></option>
After I replaced:
<div class='nobord' style='position: absolute; left: 60.2%; width: 15%; height: 11%; top:25%; background-color: transparent;'>
<?php $maxi=$results['numcountries']+1;
<select class='likeinput' style='width: 100%' name='country' id='CountrySelector' >
<?php for ($i = 0; $i<= $maxi; $i++) {
if($results['Country'][$i]->countryname===$results['contact']->country){ ?>
<option value='<?php echo $results['Country'][$i]->countryname ?>' selected='selected' ><?php echo $results['Country'][$i]->countryname; ?></option>
<?php } else { ?>
<option value='<?php echo $results['Country'][$i]->countryname ?>' ><?php echo $results['Country'][$i]->countryname ?></option>
<?php }
} ?>
</select>
with:
<div class='nobord' style='position: absolute; left: 60.2%; width: 15%; height: 11%; top:25%; background-color: transparent;'>
<?php $maxi=$results['numcountries']+1; ?>
<select class='likeinput' style='width: 100%' name='country' id='CountrySelector' >
<?php for ($i = 0; $i<= $maxi; $i++) {
$val= $results['Country'][$i]->countryname;
if($results['Country'][$i]->countryname===$results['contact']->country){
?>
<option value='<?php echo $val?>' selected='selected' ><?php echo $val ?></option>
<?php } else { ?>
<option value='<?php echo $val?>' ><?php echo $val ?></option>
<?php }
} ?>
</select>
the dropdown width corresponds to the width of the select-element.

How to assign value returned by a function into a variable?

I need to determine the sceen width using media query then properly display the results retreived from database. For now results are shown using a function this way. This function actually to display dropdown list for a particular menu.
<?php Core::getHook('block-branches'); ?>
So tried something as below to display content according to screen width:
<?php
if (isset($_GET['width'])) {
$width = $_GET['width'];
if ($width <= 480) { //mobile devices
$list = Core::getHook('home-menu-mobile'); **//assigning function value into a variable**
} elseif ($width <= 720){ //tablets
$list = Core::getHook('home-menu-mobile'); **//assigning function value into a variable**
} else { //desktops
$list = Core::getHook('block-branches'); **//assigning function value into a variable**
}
}
?>
HTML
<select id="myselect">
<option>Go To ...</option>
<option value="<?php echo $data['config']['SITE_DIR']; ?>/">Home</option>
<option value="<?php echo $data['config']['SITE_DIR']; ?>/main/page/about-us">About Us ▾</option>
<option value="<?php echo $data['config']['SITE_DIR']; ?>/main/page/the-centre-point-of-any-web-projects">Centre-Point of Web Projects</option>
<option>Branches ▾
<?php echo $list;?>**(display according to screen width)**
</option>
<option value="<?php echo $data['config']['SITE_DIR']; ?>/main/news">News</option>
<option value="<?php echo $data['config']['SITE_DIR']; ?>/main/event">Events</option>
<option value="<?php echo $data['config']['SITE_DIR']; ?>/contact">Contact Us</option>
</select>
<script>
//$('#myselect').on('change', function() {
//location.href=$(this).data('url');
//});
document.getElementById("myselect").onchange = function(d){
window.location = this.value;
};
</script>

I think the function getHook('block-branches') is returning an array not a value so you must loop the $list and display the value like this
<option>Branches ▾
<?php foreach($list as $value){
echo $value;
}?>**(display according to screen width)**
</option>

Show div base on onchange from dropdown option, help

I try to show some information inside of <div> as following:
<div id="show_details" style="'display:block;' : 'display:none;'"> SHOW me
</div>
by choose from drop down option e.g.
<?php if ($books == 'art') { ?>
<option value="art" selected="selected" id="art_indicator" onchange="(this.selected) ? $('#show_details').css('display','block') : $('#show_details').css('display','none');">Art</option>
<?php } else { ?>
<option value="art" id="art_indicator" onchange="(this.selected) ? $('#show_details').css('display','block') : $('#show_details').css('display','none');">Art</option>
<?php } ?>
and the full code as following,
<tr>
<td>Book Option</td>
<td>
<select name="books">
<?php foreach ($others as $other) { ?>
<?php if ($other == $other['other']) { ?>
<option value="<?php echo $other['other']; ?>" selected="selected"><?php echo $other['title']; ?></option>
<?php } else { ?>
<option value="<?php echo $other['other']; ?>"><?php echo $other['title']; ?></option>
<?php } ?>
<?php } ?>
<?php if ($books == 'art') { ?>
<option value="art" selected="selected" id="art_indicator" onchange="(this.selected) ? $('#show_details').css('display','block') : $('#show_details').css('display','none');">Art</option>
<?php } else { ?>
<option value="art" id="art_indicator" onchange="(this.selected) ? $('#show_details').css('display','block') : $('#show_details').css('display','none');">Art</option>
<?php } ?>
</select></td>
</tr>
<div id="show_details" style="'display:block;' : 'display:none;'"> SHOW me
</div>
Is there some way to fix this?

<script type="text/javascript">
function showDiv()
{
// hide any showing
$(".details_div").each(function(){
$(this).css('display','none');
});
// our target
var target = "#details_" + $("#test_select").val();
// does it exist?
if( $(target).length > 0 )
{
// show it
$(target).css('display','block');
}
}
$(document).ready(function(){
// bind it
$("#test_select").change(function(){
showDiv();
});
// run it automagically
showDiv();
});
</script>
<style>
.details_div
{
display:none;
}
</style>
{/literal}
<select id="test_select">
<option value="">- Select - </option>
<option value="book" selected="selected">Books</option>
<option value="movie">Movie</option>
</select>
<div id="details_book" class="details_div">BOOK DETAILS</div>
<div id="details_movie" class="details_div">MOVIE DETAILS</div>

It looks like you're using jquery so I would first suggest to remove all javascript from the html / php and put it in a separate section or file.
You can then simply do stuff like:
$("#art_indicator").change(function() {
// do what you want to do
});
Also, the html for #show_details seems to be wrong:
style="'display:block;' : 'display:none;'"
is no valid style declaration.

I don't think <option> registers the onchange event. What you want instead is to use its parent <select onchange=''> to define the change event.
<script type='text/javascript'>
function selOnChange() {
if ($('#selectList').value == "art" {
$("#show_details").css('display', 'block');
} else {
$("#show_details").css('display', 'none');
}
}
Now you need to have a default "unselected" option. I have it here with value="-1"
When the select list changes, if its value is the value of #art_indicator, the div will be shown. otherwise, the div will not be shown.
<select id='selectList' name="books" onchange="selOnChange()">
<option value="-1">Select something</option>
<option id="#art_indicator" value="art">Art choice...</option>
<?php // list all your other options ?>
</select>