Hi guys i have a combobox with jquery - but i cant make the second one populated when the first select coming selected alredy. im try to get the value without change the select.
<form>
<select name="tipo" id="Tipo_Id" class="buscaTiposVeiculos">
<option value="1" selected="selected">teste1</option>
<option value="2">teste2</option>
<option value="3">teste3</option>
<option value="4">teste4</option>
</select>
<select name="marca" class="recebeMarcas">
<option value="">--- Select ---</option>
</select>
</form>
jquery
$('select.buscaTiposVeiculos').change(function () {
$("select.recebeMarcas").html('<option value="">Carregando...</option>');
// var opt = $("select.buscaTiposVeiculos"); tried like this
// var val = $(this).val(); tried like this
// var val = $(this).find('option:selected').val(); not works
$('select.recebeMarcas >option').remove();
$.post('/inc/geraCidades.php', {
tipov: $(this).val(),
tipo: "tipo"
}, function (data) {
$('select.recebeMarcas').html('<option value="">Selecione a Marca</option>' + data);
});
});
your selected value is
$("#Tipo_Id option:selected").val();
To trigger change event on page load and populate second select automatically. Some commented code can be removed
/* create the change handler use ID is better selector for efficiancy*/
$('#Tipo_Id').change(function() {
/* this populates second select with one option*/
$("select.recebeMarcas").html('<option value="">Carregando...</option>');
/* this removes option populated in line above*/
$('select.recebeMarcas >option').remove();
$.post('/inc/geraCidades.php', {tipov: $(this).val(), tipo : "tipo"}, function(data) {
$('select.recebeMarcas').html('<option value="">Selecione a Marca</option>'+data);
});
/* trigger the change event on page load*/
}).change();
Related
I've created a very basic form that has 2 dropdown lists.
Each list contains the same entries:
<option value='1234:0'>Closed</option>
<option value='4567:2'>Open</option>
<option value='6857:1'>Dead</option>
<option value='9856:1'>Alive</option>
<option value='0000:0'>Other</option>
If an entry in dropdown 1 is selected, then that entry should be removed from dropdown 2
If a different entry is selected in dropdown 1, then that should be removed from dropdown 2 and the original entry returned to dropdown 2
if nothing is selected in dropdown 1, then all options should be shown in dropdown 2.
I've created a FIDDLE, showing how far I've got... it's not very far.
Can any one help with this ?
Thanks
Try this
$(function(){
$('#test').change(function () {
var selected = $(this).val();
$("#test2 option").show();
$("#test2 option[value='" + selected + "']").hide();
});
});
If you want to use text you can try this
$(function(){
$('#test').change(function () {
var selected = $('option:selected', this).text();
$("#test2 option").each(function(){
if($(this).text() == selected) {
$(this).hide();
} else {
$(this).show();
}
})
});
});
Since the value of each the options are identical, you can use value attribute to select the match in second select.
$('form').on('change', 'select[name="test"]', function() {
var selected = $(this).val();
$("#test2 option").show();
$("#test2 option[value='" + selected + "']").hide();
});
Demo
I am trying to get the values for the next drop-down from a database, which will be dependent on two previous drop-downs. The values for first two drop-downs are listed in the file itself. I want the second drop-down to be enable after selecting values from first, and similarly for third after second. Kindly help.
HTML code below:
<form>
<select id="branch" name="branch" class="form-control" onchange="showUser(this.value)">
<option value="">Select</option>
<option value="1">Civil</option>
<option value="2">Computer</option>
<option value="3">Mechanical</option>
<option value="4">Electronics and Telecommunications</option>
<option value="5">Electrical and Electronics</option>
<option value="6">Information Technology</option>
</select>
<select id="semester" name="semester" class="form-control" disabled>
<option value="1">I</option>
<option value="2">II</option>
<option value="3">III</option>
<option value="4">IV</option>
<option value="5">V</option>
<option value="6">VI</option>
<option value="7">VII</option>
<option value="8">VII</option>
</select>
</form>
jquery is:
<script>
$(document).ready(function(){
document.cookie = "s =hello" ;
console.log('hello');
$("#semester").attr("disabled", true);
$("#branch").change(function(){
$("#semester").attr("disabled", false);
$b = $('#branch').val();
$("#semester").change(function(){
$s = $('#semester').val();
$("#sub_code").attr("disabled", false);
console.log($s);
if($s!=1||$s!=2)
$s = $b+$s;
<?php
$s= $_COOKIE['s'];
$sql = "SELECT * FROM subjects WHERE sem_code=`$s`";
?>
});
});
});
</script>
I did not run the query since it is not assigned properly yet.
You can't include php code in javascript , the first is executed on the server side, the second is executed on the client side which means that you can't re-execute only if you resend a request to the server, obviously this is usually done by submitting forms, BUT sometimes -like in your case- we don't want to reload the whole page for each request ! and for this purpose we use AJAX
ajax sends post/get request to a specified php page which does the desired server-side tasks (updating data in the database, selecting some results from database, dealing with sessions maybe, etc...)
try something like this:
var pathurl='/path/to/your/php/file';
var params={}; //the parameters you want to send
params['semester']=$s;
var requestData= $.ajax({
type: 'POST',
url: pathurl,
cache: 'false',
data: params,
dataType: "json",
beforeSend: function () {
//here you can begin an animation or anything...
},
complete: function () {
//here you can stop animations ...
},
success: function (response) {
console.log(response); //check your console to verify the response
//loop other elements inside response
$.each(response, function (index, resultArray) {
//do something : in your case append to dropdown a new option
});
}
});
requestData.error(function () {
alert("error");
});
you should create a php file with the path specified in the above code, and there you can extract what you need from the database table, store values in an array and finally use:
echo json_encode($resultArray);
hope this was helpful
I am having trouble with populating chosen plugin multiple get with data from an ajax call. I tired following the below posts,
Jquery Chosen plugin - dynamically populate list by Ajax
Multiple Select - Chosen jQuery
Jquery chosen ajax call populate multiselelect not working
But did not help. The data just doesn't get filled :( my ajax request is as follows,
<script type="text/javascript" lang="javascript">
function doGetTag() {
alert('here');
$.ajax({
url: 'index.php/rest/resource/qtag',
//data: data,
success: function(data) {
var jsonObj = JSON.parse(data);
var tags = "";
var curVal = document.getElementById('tags').innerHTML;
for(var i = 0; i < jsonObj.length; i++) {
var tagObj = jsonObj[i];
//document.write("<option>" + tagObj.tagName + "</option>");
var tagHtml = "<option>" + tagObj.tagName + "</option></br>";
tags = tags + tagHtml ;
}
tagTotal = curVal + tags;
document.getElementById('tags').innerHTML = tagTotal;
alert( document.getElementById('tags').innerHTML);
},
type: "get"
});
}
</script>
which returns a json string. the data gets properly displayed over here if I alert it out on a message box. But the issue is how to populate the multiple get plugin? following is my html,
<select data-placeholder="Tag your question here" style="width:350px;height:50px;" multiple class="chosen-select" id="tags">
<option value="" ></option>
</select>
I am very new to this plugin and would very much appreciate your help :)
FYI
I did it using direct php as follows,
<select data-placeholder="Tag your question here" style="width:350px;height:50px;" multiple class="chosen-select" id="tags">
<option value="" ></option>
<?php
$con=mysqli_connect("localhost","user","pass","db");
$result = mysqli_query($con,"SELECT * FROM tags");
while($row = mysqli_fetch_array($result))
{
echo"<option>".$row['tagName']."</option>";
echo"</br>";
}
?>
</select>
and it properly displays the data, but the project requirement states it is a MUST to use AJAX request to populate data. Thank you very much :) your expert advice is very much appreciated :)
Fist of all check your url: 'index.php/rest/resource/qtag',
This may work :
success: function(data) {
$("#tags").html(data).trigger('liszt:updated');
}
where data = (echo from sourse)
<option value=0> </option>
<option value=1> Option 1 </option>
<option value=2> Option 2 </option>
I have a select box which is created with PHP like:
echo " <option value=\"".$row['CatId']."\">".$row['CatNaam']."</option>";
Where catid is the id which needs to be sent.
Under the select box I have a jQuery clickable div like:
<div id="addtag" style="cursor: pointer;" onclick="clicktag();">
In my script I have a function clicktag like:
function clicktag()
{
$('#addtag').hide();
alert("Tag added ");
}
</script>
What I want to do is alert the selected value(the catid) so the function must do like:
function clicktag()
{
$('#addtag').hide();
alert("Tag added "+tagid);
}
</script>
But how can I get tagid? I tried a lot of examples but can't get it working.
You need a reference to the <select> element in order to get its value. How you get that kind of depends on how the HTML looks, but the easiest way is to give it an ID (if it doesn't have one already) and select it using that:
<select name="yourSelect" id="yourSelect">
// option tags here
</select>
Then the code:
function clicktag() {
var tagId = document.getElementById('yourSelect').value;
// the rest of your code
}
try val()
function clicktag()
{
$('#addtag').hide();
alert("Tag added "+ $('#yourSelectID').val());
}
Use the change event for the select box:
//where #selectBox is id of your select box
$('#selectBox').change(function() {
var currentValue = $('#selectBox :selected').val();
alert(selectVal);
});
Use .val() to get the <select> element's current value.
Example:
<select name="mySelectElement" id="selectElement">
<option value="0">First element</option>
<option value="1">Second element</option>
...
</select>
<script type="text/javascript">
function onClick() {
alert('The selected value is ' + $('#selectElement').val());
}
</script>
$('#selectBox').live('change',function(){
var currentValue = $('#selectBox :selected').val();
alert(selectVal);
});
The selected value is the catid you say
Put it in a var and it will works.
you can try to put this in your code
function clicktag()
{
$('#addtag').hide();
var currentValue = $('#selectBox :selected').val();
alert(selectVal);
}
</script>
I had three drop down menus. Depending on items selected on two lists, the third list should be filled out (ajax post).
This is the html code:
Source Language:
<select name='source_lang' id='source_lang' $dis size='6'>
<option value='en'>EN</option>
<option value='sq'>SQ</option>
.....
</select>
Target Language:
<select name='targ_lang' id='targ_lang' $dis size='6'>
<option value='en'>EN</option>
<option value='sq'>SQ</option>
.....
</select>
Supplier:
<select name='supplier_id' id='supplier_id'>
<option value='1'>Supplier 1</option>
<option value='2'>Supplier 2</option>
</select>
On target and source language change, the supplier select list should be filled out.
Anybody can help me with the jquery? I need to ajax post the source, target language values and as response fill out the supplier select list with the data.
Is this something you're looking for?
$('#targ_lang, #source_lang').change(function(){
$.ajax({
url : '',
method : 'post',
type : 'json',
data : {
select1 : $('#targ_lang').val(),
select2 : $('#source_lang').val()
},
complete : function(result){
var options = $.parseJSON(result);
$('#supplier_id').html("");
for(i=0; i < options.length; i++) {
$('#supplier_id').append(
'<option value="'+ options[i] + '">' + 'Supplier' + options[i] + '</option>'
);
}
});
});
});
On the PHP side you need to send your result like this:
$array = new Array(1,2,3,4); // supplier IDs
echo json_encode($array);
Example using jQuery's .post() method:
$('#targ_lang, #source_lang').change(function(){
$.post("test.php", { source: $('#source_lang').val(), target: $('#targ_lang').val()},
function(data) {
//Change the data of the 3rd select
});
});