I have created and populated a drop down, I wish to alert(1) when the option in the dropdown changes. I can do it for a button with onclick but onchange doesn't seem to work. Thanks in advance.
global.js file:
$('input#lst_MonthDrop').on('change',function(){
alert(1);
};
Drop down menu:
<select name="lst_MonthDrop" style="background-color:#FF9933; color:#FFF; border:none; margin-top:10px; margin-left:10px;" onchange="global.js">
<option>Please Select</option>
<?php
include 'populatedrodown.php';
foreach ( $results as $option ) : ?>
<option value="<?php echo $option->Date; ?>"><?php echo $option->Date; ?> </option>
<?php endforeach; ?>
</select>
Remove the onchange attribute you currently have, and also target the elements name attribute. You do not have an ID:
$("select[name=lst_MonthDrop]").change(function() {
#lst_MonthDrop is <select> not <input>
Change
$('input#lst_MonthDrop').on('change',function(){
alert(1);
};
to
$('select[name="lst_MonthDrop"]').on('change',function(){
alert(1);
};
Related
I need to set a checkbox input's value as equal to value of it's sibling select option.
HTML:
<select name="team[]" class="form-control team" id="team">
<option></option>
<?php foreach ($teams as $team): ?>
<?php
$selected = '';
if (isset($edit)):
$selected = (in_array($team->id, $availableTeams)) ? ' selected' : '';
endif;
?>
<option value="<?php echo $team->id; ?>" <?php echo $selected; ?>><?php echo $team->title; ?></option>
<?php endforeach; ?>
</select>
<label>Lead</label>
<input type="checkbox" name="lead_check[]" value="">
Option values in select option are populated dynamically using loop.
You can use this script.
$(document).ready(function(){
$(document).on("click","#team",function(){
$("input[name='lead_check[]'").val($(this).val());
});
$("#team").trigger("click"); //For setting first time value on page load.
});
It will set selected options value to the checkbox on select box click event.
Assuming you want this to run on page load, here is an example of doing so:
$(function() {
$("input[name='lead_check[]']").attr('value', $("select[name='team[]']").val());
});
This will take the value of the selected option from the dropdown, and will set it as the value of the checkbox.
I want change select options to grid view.
I mean for now I must select an option to view the title, picture and buttons as you look here https://www.screencast.com/t/db7mGdlNgz
<div class="import-form-fields">
<select class="demo_version" name="demo_version">
<option>--select--</option>
<?php foreach ($list as $key => $value): ?>
<option value="<?php echo esc_attr( $key ); ?>" data-imported="<?php echo ($this->is_version_imported( $key )) ? 'yes' : 'no'; ?>"><?php echo esc_html( $value['title'] ); ?></option>
<?php endforeach ?>
</select>
</div>
Also i want that all options are showing in 1 time without select option.
How can i do this ? Please help me.
The only way to show all the options are to create a pseudo elements in Javascript.
or if you allow multiple select, you can list them all at once too.
<select multiple>
</select>
When I am select dropdown option then does'not assign the value of selected option in hidden field.
Please correct Where I am doing wrong. Thanks in advance.
<?php
include("../common/config.php");
$time = time();
$id=$_REQUEST['dr_id'];
$allEst = $db->select(array("*"),PREFIX."obligation_pharmacy","obligation_id IN ($id)");
}
?>
<script type="text/javascript">
function populate(unique,sel){
alert(sel.value);
$("#pharmacy_id"+unique).val(sel.value);
}
</script>
<select name="pharmacy_name[]" class="name" id="pharmacy_name<?php echo $time?>" style="width:180px; font-size:11px;" onchange="populate(<?php echo $time?>,this)">
<option value="">Select Pharmacy Name</option>
<?php
foreach($allEst as $ss)
{if($ss->pharmacy_name!=''){?>
<option value="<?php echo $ss->id;?>"><?php echo $ss->pharmacy_name; ?></option>
<?php }} ?>
</select>
<input type="hidden" name="pharmacy_id[]" id="pharmacy_id<?php echo $time?>" value="">
Using jQuery, usually something like this:
$('#my-select').change(function(){
var value = $(this).val();
$('#my-hidden-input').val(value);
});
$('#pharmacy_name').change(function(){
// get selected option value
var option_val = $( "#pharmacy_name option:selected" ).val();
// populate hidden field
$('#pharmacy_id').val(option_val);
}
I'm currently using Selectize.js with a 'select' item and multiple options. My html is something like:
<div class="form-group">
<label for="record-genre">Genre(s):</label>
<select name="record_genre" id="record-genre" class="form-control multi-selectize" multiple="multiple" placeholder="Enter genre(s)">
<?php foreach ($record_genre_opts as $key => $val): ?>
<option value="<?php echo $key; ?>" <?php echo (in_array($key, $record_genre)) ? "selected" : ''; ?>
<?php echo set_select('record_genre', $val); ?>
>
<?php echo $val; ?>
</option>
<?php endforeach;?>
</select>
</div>
So far so good. The items are being loaded correctly and until this point everything works great. The issue is that when the form is submitted only the last value selected is the one that is available, so if I selected multiple items I'm getting just one:
["record_genre"]=> string(1) "1"
Here's my JS setup:
$('.multi-selectize').each(function(){
//console.log($(this))
$(this).selectize({})
})
Any suggestions?
Thanks.
My mistake. The name of the select item should be record_genre[] since it is declared as a multiple select instead of just record_genre.
I can't show or hide a component from a multiplied combo box, but I can show or hide it from an original combo box(the first combo box)
what should I do..?
this is function to multiply the combo box
function addEmploy() {}
$('#addEmploy').click(function(){
$('#comboEmploy')
.append('<br />')
.append($('#comboEmploy select').first().clone());
});
this is script to show or hide the component
$("#employ").change(function() {
if($(this).val() == "2"){
$("#comboStudy").show("slow");
}else{
$("#comboStudy").hide("slow");
}
});
This is the combo box
<span id="comboEmploy">
<select name="employ[]" id="employ">
<option value="NULL" selected >Choose one</option>
<?php foreach ($employs as $employ) :?>
<option value="<?php echo $employ->employ_id; ?>">
<?php echo $employ->employ_name; ?></option>
<?php endforeach; ?>
</select>
</span>
Add Employ
This is the component that I want to show/hide
<span id="comboStudy">
<select name="study[]" id="study">
<option selected value=NULL>Choose one</option>
<?php foreach ($studies as $study) :?>
<option value="<?php echo $study->study_id; ?>">
<?php echo $study->study_name; ?></option>
<?php endforeach; ?>
</select>
</span>
Can anyone help me. thanks before.
When you clone the select box, you need to tell jQuery to clone the events along with it:
.clone(true);
As you are appending elements to the DOM after page load you need to use the live() function to attach their events:
$("#employ").live("change", function() {
...
}