Develop Reference

jquery about attributes ( load from loaded html )

I have a 2 select options. When I select the first one it posts to a link using javascript then return full options to the second one with data from a database.
I have an attributes in the second select called data-price. When I'm trying to use it, it shows nothing:
var x = $("#services").find(':selected').attr('data-price');
However when I'm trying with the first select attribute it works correctly. Anyone know how to fix ? Thanks
<script type="text/javascript">
$(document).ready(function(){
var category = document.getElementById("category").value;
$.ajax({
type:'POST',
url:'<?=base_url();?>dashboard/ajaxData',
data:'main_category='+category,
success:function(html){
$('#services').html(html);
}
});
$('#category').on('change',function(){
var category = $(this).val();
if(category){
$.ajax({
type:'POST',
url:'<?=base_url();?>dashboard/ajaxData',
data:'main_category='+category,
success:function(html){
$('#services').html(html);
}
});
}else{
$('#services').html('<option value="">Select category first</option>');
}
});
});
var x = $("#services").find(':selected').attr('data-price');
document.getElementById("demo").innerHTML = x;
</script>
<div class="form-group">
<label>Category</label>
<select name="category" id="category" class="form-control">
<?php foreach($categories->result() as $cat): ?>
<option data-price="55" value="<?=$cat->id;?>">- <?=$cat->title;?></option>
<?php endforeach; ?>
</select>
</div>
<div class="form-group">
<label>Service</label>
<select name="service" id="services" class="form-control">
<option data-price=""></option>
</select>
</div>
<div id="demo"></div>

To find the selected one you do:
$("#services option:selected")
then you can get whatever you want from that option.
For a data attribute it can be:
$("#services option:selected").data('price');
or alternatively
$("#services option:selected").attr('data-price');
This answer is based on the assumption that your select as an id attribute of services, if it is not all the above code will fail
Based on the updated code you posted you probably are looking to update the selected value when the user changes the selection.
I'd do it binding the change event like this:
$("#services option:selected").change(function(){
var price = $(this).attr('data-price');
$('#demo').html(price);
});

Dynamic dropdown list not loading in modal

I have a dependent dynamic drop listing that works fine but as soon as I include it inside a modal, it doesn't work.
This is my code within the modal:
<script src="plugins/jQuery/2.1.1.jquery.min.js"></script>
<script src="js/jquery.form.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#BugMaster').on('change',function(){
var bugmasterID = $(this).val();
if(bugmasterID){
$.ajax({
type:'POST',
url:'ajax/bugs/populate.cat.php',
data:'id_bug_master='+bugmasterID,
success:function(html){
$('#BugMasterCat').html(html);
}
});
}else{
$('#BugMasterCat').html('<option value="">Select BugMaster first</option>');
}
});
});
</script>
This is the html part of the form with the list :
<select class="form-control" name="BugMaster" id="BugMaster">
<option value="0" selected="selected">Please select module</option>
<?
while($r_b_c = mysqli_fetch_array($q_b_c)){
?>
<option value="<? echo $r_b_c['id_bug_master']; ?>"><? echo $r_b_c['name']; ?>
</option>
<? } ?>
</select>
This is the dependent list
<select name="BugMasterCat" id="BugMasterCat">
<option value="">Select country first</option>
</select>
The 'populate.cat.php' file looks like this:
if(isset($_POST["id_bug_master"]) && !empty($_POST["id_bug_master"])){
$id_bug_master = clean_data($_POST['id_bug_master']);
$q_cat = mysqli_query($sqllink,"SELECT * FROM bugs_categories
WHERE valid='1' AND id_bug_master='$id_bug_master'");
while($r_cat = mysqli_fetch_array($q_cat)){
echo "<option value='$r_cat[id_cat]'>$r_cat[name]</option>";
}
}
Then again, all this works fine if I load it directly from a page, but as soon as I open it in a modal, it fails and no categories are shown. I'm thinking it has to do with $(document).ready(function() that is not loading.
By not working I mean that the second drop down list is not being loaded.
Any help will be appreciated. Thank you.

I think no event is attached to your drop down
change your code:
... $('#BugMaster').on('change',function(){ ....
with
$(document).on('click', '#BugMaster', function() {

You need to load your JAVASCRIPT code from model itself, not from the parent / Base page.
But if you want to use another option that either use delegate or use inline javascript function call.
$(document).delegate('#BugMaster', 'change', function(){
//Implement your code here
});
OR
<select class="form-control" name="BugMaster" id="BugMaster" onchange="CALLJAVASCRIPTFUNCTIONHERE();">

How to make second dropdown hide from the choices of first dropdown in loop

for ($i = 0; $i <= $member_count - 1; $i++) {
?>
<select id='purpose' name="member[<?= $i ?>][health_status]">
<option value=""></option>
<option value="0">Perfect</option>
<option value="1">Not well</option>
</select>
<div id='health'>
<label>Illness If Any:</label>
<select name="member[<?= $i ?>][illness_type]">
<option value=""></option>
<option value="0">Diabetes</option>
<option value="1">BP</option>
<option value="2">Head</option>
</select>
</div>
How to make second drop down hide from the choices of first dropdown. .Dropdown not working properly to for loop
script code:
<script>
$(document).ready(function () {
$('#purpose').on('change', function () {
if (this.value == 'Perfect')
{
$("#health").hide();
} else
{
$("#health").show();
}
});
});
</script>

You would have to use javascript for this. Using jQuery, this should do the trick; just replace the secondDropdownMenuSelector value with a selector for your second dropdown menu (you could give it an id for example):
<script type="text/javascript">
$document).ready(function(){
secondDropdownMenuSelector = "yourSelectorHere";
$("#purpose").on("change", function(){
if($(this).val()=='1' && $(secondDropdownMenuSelector).is(":hidden")){
$(secondDropdownMenuSelector).show();
}
else if ($(this).val()=='0' && $(secondDropdownMenuSelector).is(":visible")) {
$(secondDropdownMenuSelector).hide();
}//end if
});
});
</script>
Although I see now that you are using a loop to output the dropdown menus multiple times. This will result in multiple elements having the same id. This can never be the case; IDs are intended to be unique. You either have to give each element a unique id (you could do that by concatenating 'purpose' with $i for example), or even better you should not use an id at all but rather a class.
Also, if you do use a class, then instead of
$(secondDropdownMenuSelector)
you would then have to use
$(this).siblings(secondDropdownMenuSelector)
in order to reference the correct dropdown menu every time.

Give this a shot!!
$(document).ready(function () {
$('.purpose').on('change', function () {
if (this.value == 'Perfect')
{
$(this).parents(".select_container").find("#health").hide();
} else
{
$(this).parents(".select_container").find("#health").show();
}
});
});
for ($i = 0; $i <= $member_count - 1; $i++) {
?>
<div class="select_container">
<select class='purpose' name="member[<?= $i ?>][health_status]">
<option value=""></option>
<option value="0">Perfect</option>
<option value="1">Not well</option>
</select>
<div class='health'>
<label>Illness If Any:</label>
<select name="member[<?= $i ?>][illness_type]">
<option value=""></option>
<option value="0">Diabetes</option>
<option value="1">BP</option>
<option value="2">Head</option>
</select>
</div>
</div>
First of all i've changed id attribute of select to class as it's not right to use same id for multiple select boxes. Now next thing i've done is enclosed both the select boxes inside a div and thereby i'm able to hide and show the div using parent selector of jquery. Have a look!!

Remove one value from all drop down using jquery

I have multiple drop down with same value.If they select Lunch first time from other drop down I have to remove Lunch. Following is my code
Front end code
<?php for($i=1; $i<=7; $i++)
{?>
<select name="task<?php echo $i;?>" onchange="checkSelected(this,<?php echo $i; ?>);" id="task<?php echo $i;?>"
<option value="Testing">Testing</option>
<option value="Lunch">Lunch</option>
<option value="Other">Other</option>
</select>
<?php } ?>
In javascript I am removing 3rd select box (task3) its got removed but i have to remove all the other except the selected one how i can implement this
javascript function
function checkSelected(e,number)
{
if(e.value == 'Lunch')
{
$('#task3 option[value="Lunch"]').remove();
}
}
I tried this but its not working
$("#task+"number"+ > option[value='Lunch']").remove();

It should be
$("#task" + number + " > option[value='Lunch']").remove();

You could use the .each() function to remove only the option that has the value you select from the list.
$('select').change(function(){
var value = $(this).val()
// Probably best to store this value here before removing the option below.
$(this).children().each(function(){
if($(this).val() == value){
$(this).remove();
}
});
});
Working example - http://jsfiddle.net/amQuU/
Example with multiple dropdowns http://jsfiddle.net/amQuU/1/
Example that removes the options from another select box - http://jsfiddle.net/amQuU/2/
The only problem in doing this is that by removing the selected option it is not shown as the selected option. you can however store the value after selecting it and before removing it from the list as commented above.
Another thing you should consider is changing .remove() to .attr('disabled','true') so that you can re-enable the option later on if you need to e.g. someone wants to go back and change the previous select. Here is an example of that too http://jsfiddle.net/amQuU/3/

If only the "lunch" option is concerned by your answer (see my comment above), then there's a solution. It's not already full-optimized, but you see how you can do it.
JSFiddle http://jsfiddle.net/4qndV/1/
HTML
<form action="demo.html" id="myForm">
<p>
<label>First:</label>
<select class="event_handler" name="task1">
<option value="Testing">Testing</option>
<option value="Lunch">Lunch</option>
<option value="Other">Other</option>
</select>
</p>
<p>
<label>Second:</label>
<select class="event_handler" name="task2">
<option value="Testing">Testing</option>
<option value="Lunch">Lunch</option>
<option value="Other">Other</option>
</select>
</p>
<input type="submit" value="Submit">
</form>
JQuery
$(function () {
// Handler for .ready() called.
$(".event_handler").on("change", function () {
event.preventDefault();
var name_select = $(this).attr("name");
if ($(this).val() == "Lunch") {
//Loop through each "lunch" element
$('.event_handler option[value=Lunch]').each(function(){
//Remove all 'lunch' option, except the ont in the 'name_select' select
if($(this).parent().attr("name") != name_select){
$(this).remove();
}
});
}
})
});
NB: I suppose you have to allow the user to change his selection. It's why I use "disable" in place of "remove". But you can easily adapt this code if you really want to remove the option element.

display a dropdownlist everytime when a button is clicked

I have a drop down list. I have made it hidden at the start but whenever a specific button say TEST is clicked i want that list to be displayed. Also on each click I want it to be displayed. If the button is clicked 3 times then 3 drop downs and so on. At the moment the dropdown is being displayed only once when the button is clicked.
Don't bother the PHP code inside it.
<p>
<label for ="test">TEST:</label>
<input type="button" name="test" value="testing" onclick="display()"/>
<?php
echo '<select name="LIVINGSTYLE" id="test">';
// some code here
echo '</select>';
?>
</p>
My Javascript function:
function ondisplay()
{
document.getElementById("test").style.display="block";
}

Your onclick handler is display() however your function name is ondisplay
Try something like this;
Try the following;
Javascript;
<script type="text/javascript">
function showHide(obj)
{
var div = document.getElementById(obj);
if (div.style.display == 'none')
{
div.style.display = '';
}
else
{
div.style.display = 'none';
}
}
</script>
HTML;
CLICK ME
<div id="UMAR" style="display: none;">
Assalam-o-Alaikum !!!
</div>

jQuery solution, here's a Fiddle, with this you can display infinite select boxes.
<label for ="test">TEST:</label>
<input id="test" type="button" name="test" value="Testing"/>
$(function(){
$('#test').click(function(){
$('body').append('<select name="LIVINGSTYLE" id="test">'+
'<option value="1">Option 1</option>'+
'<option value="2">Option 2</option>'+
'<option value="3">Option 3</option>'+
'<option value="4">Option 4</option>'+
'</select>');
});
});