<select name = "team1">
<option>Computer Science</option>
<option>Mathematics</option>
<option>Bioinformatic</option>
<option>Management Sciences</option>
</select>
<select name = "team2">
<option>Computer Science</option>
<option>Mathematics</option>
<option>Bioinformatic</option>
<option>Management Sciences</option>
</select>
how can i use the above code as depending "team2" on what value "team1" have.If i select computer science in the select option of team 1, then i don't want computer science to appear in the options of "team2".
You can give an ID to your selection and check the selection of the specific element. Thus you can distinguish between team1 and team2 and remove some in team2-selection with same value. it could be something like this:
<body>
<select onChange="jsFunction()" id="team1" >
<option onclick="jsFunction()">Computer Science</option>
<option>Mathematics</option>
<option>Bioinformatic</option>
<option>Management Sciences</option>
</select>
<select id="team2">
<option>Computer Science</option>
<option>Mathematics</option>
<option>Bioinformatic</option>
<option>Management Sciences</option>
</select>
<script>
function jsFunction(){
var team1 = document.getElementById( "team1" );
var team2 = document.getElementById( "team2" );
for (i=0;i<4;i++){
team2.remove(0);
}
var position=0;
for (i=0;i<4;i++){
if (i!=team1.selectedIndex){
team2.options[position] = new Option(team1.options[i].value);
position=position+1;
}
}
}
</script>
</body>
You can use Checkbox for these options.Its solves your Problem.
why PHP?
http://jsfiddle.net/655noe6p/
HTML:
<select name = "team1">
</select>
<select name = "team2">
</select>
JS:
var l = [
'Computer Science',
'Mathematics',
'Bioinformatic',
'Management Sciences'
];
$('select').change(function() {
var me = $(this);
var other = me.siblings();
var text = me.children(':selected').text();
other.each(function() {
var select = $(this);
var currentText = select.children(':selected').text();
select.empty();
$.each(l, function(k, d) {
if(d != text) {
select.append($('<option></option>').html(d).attr('selected', d == currentText));
}
});
});
});
$('select').change().change();
Related
Here is my code i am struggling with the multiple values select with jquery if i will select two values i should get two values in the function test
<html>
<select name="hello[]" id="hello" multiple="multiple" onchange="test(this.value);">
<option value="">Select Value</option>
<option value="1">PHP</option>
<option value="2">JAVA</option>
<option value="3">.NET</option>
<option value="4">ORACLE</option>
<option value="5">DBA</option>
</select>
</html>
<script>
function test(xx)
{
alert(xx);
}
please help me
Try the below code similar to your approach
<script>
var hello = new Array();
function test(xx)
{
hello.push(xx);
alert(hello);
}
</script>
Try removing this:
onchange="test(this.value);"
and jQuery:
var test = function(x) {
alert(x);
}
$(document).on('change', '#hello', function() {
var val = $(this).val();
test(val);
});
or more compact:
$(document).on('change', '#hello', function() {
var val = $(this).val();
alert(val);
});
Check the DEMO
How do I generate n number of input text box in JavaScript using a select option. And how do I fetch the variables in PHP.
below is my html form
<HTML>
<HEAD>
<TITLE>Dynamically add Textbox in html Form using JavaScript</TITLE>
<SCRIPT language="javascript">
var numberOfElementsAdded;
var arrayOfInputs = new Array();
function addToDatabase(numberOfElementsAdded) {
numberOfElementsAdded = numberOfElementsAdded * numberOfElementsAdded;
var alltext = "";
for (var j = 1; j <= numberOfElementsAdded; j++) {
var tvalue = document.getElementsByName("text" + j)[0].value;
arrayOfInputs.push(tvalue);
alltext = alltext + tvalue + " ";
}
alert(alltext);
}
function add(type, num) {
numberOfElementsAdded = num;
//Create an input type dynamically.
var k = 0;
for (var j = 0; j < num; j++) {
for (var i = 0; i < 4; i++) {
var element = document.createElement("input");
k = k + 1;
//Assign different attributes to the element.
element.setAttribute("type", type + k);
element.setAttribute("id", type + k);
element.setAttribute("name", type + k);
element.setAttribute('width', '30');
element.setAttribute('border', '3px solid #FF0000');
var foo = document.getElementById("fooBar");
//Append the element in page (in span).
foo.appendChild(element);
}
var breakLoop = document.createElement('br')
foo.appendChild(breakLoop)
}
var element = document.createElement("input");
element.setAttribute("type", "button");
element.setAttribute("id", "Submit");
element.setAttribute("name", "Insert into database");
element.setAttribute("value", "Insert into database");
element.setAttribute("onclick", "addToDatabase(numberOfElementsAdded)");
var breakLoop = document.createElement('br')
foo.appendChild(breakLoop)
foo.appendChild(element);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<H2>Dynamically add element in form.</H2>
<SELECT name="element">
<OPTION value="1">1</OPTION>
<OPTION value="2">2</OPTION>
<OPTION value="3">3</OPTION>
<OPTION value="4">4</OPTION>
<OPTION value="5">5</OPTION>
<OPTION value="6">6</OPTION>
<OPTION value="7">7</OPTION>
<OPTION value="8">8</OPTION>
<OPTION value="9">9</OPTION>
<OPTION value="10">10</OPTION>
</SELECT>
<INPUT type="button" value="Add" onclick="add('text',document.forms[0].element.value)"/>
<BR/>
<span id="fooBar"> </span>
</FORM>
</BODY>
</HTML>
It generates the text box. But I want to fetch the values of text box as a PHP variable.
Assuming the code generates the textboxes properly, to get the values in PHP, you will have to amend this:
element.setAttribute("name", "Insert into database");
to
element.setAttribute("name", "myFieldName[]"); // with the [] brackets
Then in PHP, you will get it this way:
$fields = $_POST['myFieldName'];
// make it into a single delimited field
$fields = implode('|', $fields);
`<select multiple="multiple" name="state[]" id="state">
<option value="">Select a State</option>
<?php
foreach($state_list as $key=>$value){
echo "<option value=\"$key\"";
if($html['state']==$key|| $row['state']==$key){
echo ' selected="selected"';
}
echo ">$value</option>\n";
}?>
</select> </p>`
<p>Select A Country
<select name="country" id="country">
<option value="0">Select a Country</option>
<option value="USA">USA</option>
<option value="UK">UK</option>
</select> </p>
I have two select boxes 1)state[] 2) country . What is want is that "If the selected country is not USA, disable the multi-select box which consists all the USA states". Any help is appreciated
Add this Javascript to your code:
<script type="text/javascript">
<!--
window.onload = function() {
var selectCountry = document.getElementById('country');
selectCountry.onchange = function() {
document.getElementById('state').disabled = (selectCountry.value != 'USA')? true : false;
};
};
//-->
</script>
You could do the following if you have jQuery:
$('#country').change(function () {
if($('#country').val() != "USA") {
$('#state').attr('disabled', 'disabled');
}
else {
$('#state').removeAttr('disabled');
}
});
Or if you are using plain JavaScript:
var elem = document.getElementById("country");
elem.onchange = function () {
if(elem.options[e.selectedIndex].value != "USA") {
document.getElementById('state').disabled = "disabled";
}
else {
document.getElementById('state').removeAttribute("disabled");
}
}
This will disable the state combo box when the country combo box contains a value that is not "USA". When the selected country is "USA", it will remove the disabled attribute and make it usable again.
Hope this helps.
I have few drop-down boxes. Is there any way to detect which dropdown was changed using jquery ?
<form id="products">
<select id="Ram">
<option value="0">4 GB</option>
<option value="1">8 GB</option>
</select>
<select id="Hdd">
<option value="0">300 GB</option>
<option value="1">500 GB</option>
</select>
</form>
Javascript/Jquery
$(document).ready(function() {
$('#products').change(function() {
var value = $(this).val(); //In here I want to detect and return the value.
alert(value); // Want to return dropdown ID and its selected value
});
});
$(document).ready(function() {
$('select').not('ids of select tags which you want to exclude seperated by a comma').change(function() {
var id = $(this).attr('id');
var value = $(this).val();
alert('ID ='+id+' Value ='+value);
});
});
Aspirin is right,
I would just improve his answer.
$(document).ready(function() {
$('#products select').change(function() {
var id = $(this).attr('id');
var value = $(this).val();
alert('ID ='+id+' Value ='+value);
});
});
I have two tables in database: city and local_area
city :
id name
1 FSD
2 LHr
Local_area :
id city_id name
1 1 Kohnoor
2 1 samnabad
3 2 joharabad
4 2 amanabad
<select>
<option value="1">Fsd</option>
<option value="2">LHR</option>
</select>
I have a select box that allows to me to choose the city to display. When I select a city it should show a new HTML element showing all local_area for the given city.
I Have to do this using jQuery, after selection I want to store my record in database table.
<select id="ddCity">
<option value="-1"></option>
<option value="1">FSD</option>
<option value="2">LHr</option>
</select>
<div id="local_area_Grid"></div>
<script>
$(function(){
$("#ddCity").change(function(){
if($(this).val() != -1){
$.ajax({
url: "Server_address",
data:{cityId = $(this).val()},
success: function(data){
var _table = $("<table></table>");
for(var i = 0; i< data.length; i++){
$("<tr></tr>").append($("<td></td>").html("<label><input type='checkbox' value='data[i]' name='local_area'/>" + data[i] + "</label>")).appendTo(_table);
}
$("#local_area_Grid").html("").append(_table);
}
});
}
});
})
</script>
You should return an array from service
You need to use jQuery AJAX to "ask" a server for list of areas corresponding to the city. Or, may be, it would be better for you to load full list of all areas with page. For example:
<script language="JavaScript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<select id="city" name="city">
<option value="0">- Select -</option>
<option value="1">Fsd</option>
<option value="2">LHR</option>
</select>
<div id="area" style="display:none">
</div>
<script language="JavaScript">
var areas = {
'1' : { '1' : 'Kohnoor' },
'2' : { '1' : 'amanabad' }
}
$(function (){
var areaSelect = $('#area');
var citySelect = $('#city').change(function (){
var value = $(this).val();
if( value && typeof areas[value] != 'undefined' ){
areaSelect.empty().show();
for( var i in areas[value] ){
areaSelect.append('<input type="checkbox" name="area[]" value="'+i+'" />'+areas[value][i]+'<br />');
}
}else{
areaSelect.empty().hide();
}
});
});
</script>