Select onselect all disable other values - PHP and jQuery - php

I have select box with multiple option in my project. The code is below
<select name='sendto[]' id='sendto' multiple required>
<option value='branchstaff'>Branch Staff</option>
<option value='manager'>Manager</option>
<option value='cashier'>Cashier</option>
<option value='hostaff'>Head Office Staff</option>
<option value='all'>All of Above</option>
</select>
I am using jQuery in this project. Now I want to select some values to send message. How can I deselect all other values when I click All of Above


This is how I would do it:
$("option").click(function () {
if ($(this).text() == "All of Above") {
$(this).siblings().removeAttr("selected");
}
});
Here is the JSFiddle demo


$('#sendto').change(function() {
alert($('option:selected', this).val())
if ($('option:selected', this).val() === 'all') {
$("select[multiple] option").prop("selected", "selected");
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name='sendto[]' id='sendto' multiple required>
<option value='branchstaff'>Branch Staff</option>
<option value='manager'>Manager</option>
<option value='cashier'>Cashier</option>
<option value='hostaff'>Head Office Staff</option>
<option value='all'>All of Above</option>
</select>
$('#sendto').change(function () {
if ($('option:selected', this).val() == 'all') {
$("select[multiple] option").prop("selected", "selected");
}
})
<select name='sendto[]' id='sendto' multiple required>
<option value='branchstaff'>Branch Staff</option>
<option value='manager'>Manager</option>
<option value='cashier'>Cashier</option>
<option value='hostaff'>Head Office Staff</option>
<option value='all'>All of Above</option>
</select>
Try this


try below
$('#sendto option[value="all"]').on('click',function(){
$('#sendto').find('option').attr('selected','selected');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name='sendto[]' id='sendto' multiple required>
<option value='branchstaff'>Branch Staff</option>
<option value='manager'>Manager</option>
<option value='cashier'>Cashier</option>
<option value='hostaff'>Head Office Staff</option>
<option value='all'>All of Above</option>
</select>


$('option[value="all"]').on('click',function(){
$(this).parent().find('option').attr('selected','selected');
$(this).removeAttr('selected');
});

Related

how to show gender using simple html dom parser in php?

i'm unable for success in how to show gender and state from below coading
please solve this.
$gender = $html->getElementById("cpBody_rbtnListGender")->getAttribute("value");
$state = $html->getElementById("cpBody_ddlState")->getAttribute("value");
this is for gender
<span id="cpBody_rbtnListGender" class="form-control pull-left radio-input"><input id="cpBody_rbtnListGender_0" type="radio" name="ctl00$cpBody$rbtnListGender" value="MALE" checked="checked" tabindex="3"><label for="cpBody_rbtnListGender_0">Male</label><input id="cpBody_rbtnListGender_1" type="radio" name="ctl00$cpBody$rbtnListGender" value="FEMALE" tabindex="3"><label for="cpBody_rbtnListGender_1">Female</label><input id="cpBody_rbtnListGender_2" type="radio" name="ctl00$cpBody$rbtnListGender" value="TRANSGENDER" tabindex="3"><label for="cpBody_rbtnListGender_2">Transgender</label><input id="cpBody_rbtnListGender_3" type="radio" name="ctl00$cpBody$rbtnListGender" value="OTHER" tabindex="3"><label for="cpBody_rbtnListGender_3">Other</label></span>
and this is for state
<div class="input-group">
<label class="control-label label-fixed">State</label>
<select name="ctl00$cpBody$ddlState" id="cpBody_ddlState" tabindex="15" class="form-control">
<option value="0">--SELECT STATE--</option>
<option value="1">ANDAMAN & NICOBAR ISLANDS</option>
<option value="2">ANDHRA PRADESH</option>
<option value="3">ARUNACHAL PRADESH</option>
<option value="4">ASSAM</option>
<option value="5">BIHAR</option>
<option value="6">CHANDIGARH</option>
<option value="7">CHHATTISGARH</option>
<option value="8">DADRA & NAGAR HAVELI</option>
<option value="9">DAMAN & DIU</option>
<option value="10">DELHI</option>
<option value="11">GOA</option>
<option value="12">GUJARAT</option>
<option value="13">HARYANA</option>
<option value="14">HIMACHAL PRADESH</option>
<option value="15">JAMMU AND KASHMIR</option>
<option value="16">JHARKHAND</option>
<option value="17">KARNATAKA</option>
<option value="18">KERALA</option>
<option value="19">LAKSHADWEEP</option>
<option value="20">MADHYA PRADESH</option>
<option value="21">MAHARASHTRA</option>
<option value="22">MANIPUR</option>
<option value="23">MEGHALAYA</option>
<option value="24">MIZORAM</option>
<option value="25">NAGALAND</option>
<option value="26">ORISSA</option>
<option value="27">PONDICHERRY</option>
<option value="28">PUNJAB</option>
<option selected="selected" value="29">RAJASTHAN</option>
<option value="30">SIKKIM</option>
<option value="31">TAMIL NADU</option>
<option value="32">TELANGANA</option>
<option value="33">TRIPURA</option>
<option value="34">UTTAR PRADESH</option>
<option value="35">UTTARAKHAND</option>
<option value="36">WEST BENGAL</option>
</select>
</div>
state and gender is not showing using getAttribute("value");

You could make use of find.
One option to get the state could be to use the id and get the selected option #cpBody_ddlState option[selected]
$state = $html->find('#cpBody_ddlState option[selected]', 0)->plaintext;
echo $state; //RAJASTHAN
To get the selected radio button you might use #cpBody_rbtnListGender input and loop though the items until the attribute checked matches:
foreach ($html->find('#cpBody_rbtnListGender input') as $input) {
if ($input->hasAttribute("checked")) {
echo $input->getAttribute("value"); // MALE
}
}

idk why you're doing this with php.'
in javascript u can create a p to pass the value to it:
<body onload="pageloaded()">
<p id="display"></p>
in javascript:
var p = document.getElementById("display");
var value = document.getElementById("cpBody_rbtnListGender").value;
function pageloaded(){
p.innerHTML = value;
}
u can do the same for ur other needs

how to display jquery/ajax data into select field?

code:
<script>
$(document).ready(function(){
$(".field").change(function(){
field = $(".field").val();
$.ajax({
type:"POST",
data:{"field":field},
url:"potential-courses.php",
success:function(data){
$(".course").val(data);
}
});
});
});
</script>
potential-courses.php
<?php
include("conn.php");
$field = $_POST['field'];
$sql = "select * from course_master where field = '$field' order by course_full_name";
$result = mysqli_query($link,$sql);
while ($row = mysqli_fetch_array($result))
{
echo "<option value=".$row['course_short_name'].">".$row['course_full_name']."</option>";
}
?>
html code:
<select name='field' class='field' id="field">
<option value="">Select Field</option>
<option value='engineering'>Engineering</option>
<option value='law'>LAW</option>
<option value='medical'>Medical</option>
<option value='management'>Management</option>
<option value='pharmacy'>Pharmacy</option>
<option value='hotel management'>Hotel Management</option>
<option value='mass communication'>Mass Communication</option>
<option value='agriculture'>Agriculture</option>
<option value='architecture'>Architecture</option>
<option value='education'>Education</option>
<option value='paramedical'>Paramedical</option>
<option value='design'>Design</option>
<option value='commerce'>Commerce</option>
<option value='film/tV/media'>Film /TV/ Media</option>
</select>
<select name="course" class="course">
<option value="">Select Courses</option>
</select>
In this code I have two dropdown list i.e
<select name='field' class='field' id="field">
and another is
<select name="course" class="course">
when I change value from "name=field" it display nothing in "name=course". where I am doing wrong please help me.
Thank You

Change it:
$(".course").val(data);
to
$(".course").html(data);
It will add the <option> set that you have returned from php to your <select>

HTML from dropdown lists third category

Yesterday i asked how i could generate a second dropdown list for a subcategory, so in the first dropdown i would select "Trucks" and a second dropdown would appear with the colors "Black" or "White" to pick or if in the first dropdown i select "Cars" the second generated dropdown would have "Red", "Green" or "Blue" options, that lead to this http://jsfiddle.net/7YeL6/5/ that i implemented in my code and works like a charm (i already put more results in the ".js" and is working 100%).
But now im facing a new problem because i need to generate a third category and i dont know anything about jquery.
Based on the previous code, i need a third dropdown to appear based on the second dropdown so for example:
If i select "Trucks", then "Black" a new dropdown will appear to select "New" or "Used" or if i select "Cars", then "Red" a new dropdown will appear to select "Buy" or "Rent".
HTML CODE
<select name="category" id="category">
<option selected value="Please Select">Please Select</option>
<option value="Cars">Cars</option>
<option value="Trucks">Trucks</option>
<option value="Motorcycles">Motorcycles</option>
<option value="Boats">Boats</option>
</select>
<div>
<select name="category2" id="truck" class="second">
<option value="white">white</option>
<option value="black">black</option>
</select>
<select name="category2" id="car" class="second">
<option value="red">red</option>
<option value="green">green</option>
<option value="blue">blue</option>
</select>
</div>
CSS CODE
#category2{
display: none;
}
.second{
display: none;
}
JS CODE
$(document).ready(function(){
$("#category").change(function () {
var str = "";
str = $("select#category option:selected").text();
if(str == "Trucks"){
$("select.second").not("#truck").hide();
$("#truck").show();
$("#truck").fadeIn(1000);
}
else if(str == "Cars"){
$("select.second").not("#car").hide();
$("#car").show();
$("#car").fadeIn(1000);
}
})
});
Thanks

It looks like you wanted to this instead
Demo: http://jsfiddle.net/7YeL6/7/
HTML CODE
<select id="category" class="first">
<option selected value="Please Select">Please Select</option>
<option value="car">Cars</option>
<option value="truck">Trucks</option>
<option value="motor">Motorcycles</option>
<option value="boat">Boats</option>
</select>
<select id="truck" class="second">
<option selected value="Please Select">Please Select</option>
<option value="white">white</option>
<option value="black">black</option>
</select>
<select id="car" class="second">
<option selected value="Please Select">Please Select</option>
<option value="red">red</option>
<option value="green">green</option>
<option value="blue">blue</option>
</select>
<select id="truck-white" class="third">
<option value="size1">truck-white1</option>
<option value="size2">truck-white2</option>
</select>
<select id="truck-black" class="third">
<option value="size1">truck-black1</option>
<option value="size2">truck-black2</option>
</select>
<select id="car-red" class="third">
<option value="1">car-red1</option>
<option value="2">car-red2</option>
<option value="3">car-red3</option>
</select>
<select id="car-green" class="third">
<option value="1">car-green1</option>
<option value="2">car-green2</option>
<option value="3">car-green3</option>
</select>
CSS CODE
.second{
display: none;
}
.third{
display: none;
}
JQuery CODE
$(".first").change(function () {
var str = "";
str = $(this).val();
$('.second').hide();
$('.third').hide();
$('#'+str).show();
});
$(".second").change(function () {
var str = "";
str = $(this).val();
var id = $(this).attr('id');
$('.third').hide();
$('#' + id + "-" + str).show();
})

Javascript Jquery Get Dropdown value always 0

I am developing a website using CI, PHP, JQuery. I have a dropdown menu. When I try to get the value using JQuery, the result always 0. Here is my code.
html:
<div id="label"><label>Merk</label></div><div id="pilihan"><select name="brand">
<option value="0">PILIH SATU</option>
<option value="1">ACURA</option>
<option value="2">ALFA ROMEO</option>
<option value="3">ASTON MARTIN</option>
<option value="4">AUDI</option>
<option value="5">BENTLEY</option>
<option value="6">BERTONE</option>
<option value="7">BIMANTARA</option>
<option value="8">BMW</option>
<option value="9">BUGATTI</option>
<option value="10">BUICK</option>
<option value="11">CADILLAC</option>
<option value="12">CHANA</option>
<option value="13">CHERY</option>
<option value="14">CHEVROLET</option>
<option value="15">CHRYSLER</option>
<option value="17">CITROEN</option>
<option value="18">CODA</option>
<option value="19">DAEWOO</option>
<option value="20">DAIHATSU</option>
<option value="21">DAIMLER</option>
<option value="22">DATSUN</option>
<option value="23">DODGE</option>
<option value="24">DYNA</option>
<option value="25">FERRARI</option>
<option value="26">FIAT</option>
<option value="27">FORD</option>
<option value="28">FOTON</option>
<option value="29">GREELY</option>
<option value="30">GMC</option>
<option value="31">GREAT WALL</option>
<option value="32">HAGLER</option>
<option value="33">HINO</option>
<option value="34">HOLDEN</option>
<option value="35">HONDA</option>
<option value="36">HUMMER</option>
<option value="37">HYUNDAI</option>
<option value="38">INFINITI</option>
<option value="39">ISUZU</option>
<option value="40">JAGUAR</option>
<option value="41">JEEP</option>
<option value="42">KIA</option>
<option value="43">KTM</option>
<option value="44">LAMBORGHINI</option>
<option value="45">LAND ROVER</option>
<option value="46">LEXUS</option>
<option value="47">LIGIER</option>
<option value="48">LOTUS</option>
<option value="49">MASERATI</option>
<option value="50">MAYBACH</option>
<option value="51">MAZDA</option>
<option value="52">MCLAREN</option>
<option value="53">MERCEDES-BEN</option>
<option value="54">MINI</option>
<option value="55">MITSUBISHI</option>
<option value="56">MORGAN</option>
<option value="57">NISSAN</option>
<option value="58">OPEL</option>
<option value="59">PEUGEOT</option>
<option value="60">PORSCHE</option>
<option value="61">PROTON</option>
<option value="62">RANGE ROVER</option>
<option value="63">RENAULT</option>
<option value="64">ROLLS-ROYCE</option>
<option value="65">SAAB</option>
<option value="66">SKODA</option>
<option value="67">SMART</option>
<option value="68">SSANGYONG</option>
<option value="69">SUBARU</option>
<option value="70">SUNBEAM</option>
<option value="71">SUZUKI</option>
<option value="72">TATA</option>
<option value="73">TIMOR</option>
<option value="74">TOYOTA</option>
<option value="75">TRIUMPH</option>
<option value="76">VAUXHALL</option>
<option value="77">VOLKSWAGEN</option>
<option value="78">VOLVO</option>
<option value="79">WRANGLER</option>
</select></div>
JQuery:
$('select[name="brand"]').change(function(){
var brand = $("select[name='brand']").val();
alert(brand);
$.ajax({
type: "POST",
url: '<?php echo site_url("ajax_data/getmodel"); ?>',
dataType: 'json',
data: { vehicle_class : '', vehicle_brand : brand },
success: function(data) {
// Clear all options from vehicle class select
$('select[name="model"] option').remove();
// Fill vehicle class select
$.each(data, function(i, j){
var row = "<option value=\"" + j.model_id + "\">" + j.model_name + "</option>";
$(row).appendTo('select[name="model"]');
});
}
});
});
What is wrong with my code actually? Thank you.

I've just put your code in to a text file (named test.html)...
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<div id="label"><label>Merk</label></div><div id="pilihan"><select name="brand">
<option value="0">PILIH SATU</option>
<option value="1">ACURA</option>
<option value="2">ALFA ROMEO</option>
<option value="3">ASTON MARTIN</option>
: : :
<option value="77">VOLKSWAGEN</option>
<option value="78">VOLVO</option>
<option value="79">WRANGLER</option>
<script type="text/javascript">
$('select[name="brand"]').change(function(){
var brand = $("select[name='brand']").val();
alert( brand );
});
</script>
</body>
</html>
And the code works, perfectly in FireFox, Chrome and IE8.
Also, my mate says salam sejahtera. :o)

You're selecting with select[name=brand], which means you're trying to access
<select value="THIS_IS_WHAT_YOU_ARE_SELECTING">
but you want the selected option, so use
$('select[name=brand] option:selected').val();

Dynamically generate a single new drop down menu in a html form

I have a html form defined . I have a button for the user to select his occupation . If his occupation happens to be a student then i need to generate another new button dynamically . If the user selects anything other than a student then i dont want any new button . I am unsure how to do . Do i use jquery ? I have no idea to use jquery . Can some one help ? Any pointers
Thanks.
<?php
?>
<script language="javascript" type="text/javascript">
$(document).ready(function()
{
$('#occupation').change(function()
{
if($(this).val() == 'Student')
{
$('#school').show();
} else {
$('#school').hide();
}
});
});
</script>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<form>
<select name="occupation" id="occupation">
<option value="">- Select Occupation -</option>
<option value="Worker">Worker</option>
<option value="Student">Student</option>
</select>
<select name="school" id="school" style="display: none;">
<option value="">Select School Type</option>
<option value="4 Year">4 Year</option>
<option value="2 Year">2 Year</option>
</select>
</form>
</body>
</html>

Personally I accomplish this by placing the additional form element in the HTML, simply hidden like so:
<select name="occupation" id="occupation">
<option value="">- Select Occupation -</option>
<option value="Worker">Worker</option>
<option value="Student">Student</option>
</select>
<select name="school" id="school" style="display: none;">
<option value="">Select School Type</option>
<option value="4 Year">4 Year</option>
<option value="2 Year">2 Year</option>
</select>
Then you can use JS, as I prefer jQuery, to show the div or hide the div when applicable:
$(document).ready(function()
{
$('#occupation').change(function()
{
if($(this).val() == 'Student')
{
$('#school').show();
} else {
$('#school').hide();
}
});
});

Using jQuery would simplify this:
Let's say you have the following:
<form>
<select name="occupation">
<option value="Non-Student">Non-Student</option>
<option value="Student">Student</option>
</select>
</form>
Then the following would be used to append the button if the user selected 'Student':
$(function(){
$('select[name="occupation"]').change(function(){
var val = $(this).val();
if(val=='Student'){
$('form').append('<button>New Button</button>');
}
});
});

Categories