I have this simple dropdown menu in my codeigniter form. When clicking dzongkhag(district) it should display the list of geogs(towns), but, instead it do not do so. The drop down menu that I have is not the best one but that is what I could come up with after trying (for many weeks) many times unsuccessfully. I will be grateful if someone could help me out/solve/advice on this.
Here are the snippets.
view.php
<label >Dzongkhag: </label>
<select id="user_dzongkhag" name="dzongkhag" >
<option>Select Dzongkhag</option>
<option value="Bumthang">Bumtang</option>
<option value="Chhukha">Chhukha</option>
<option value="Dagana">Dagana</option>
<option value="Gasa">Gasa</option>
<option value="Haa">Haa</option>
<option value="Lhuentse">Lhuntse</option>
<option value="Monggar">Monggar</option>
<option value="Paro">Paro</option>
<option value="Pema Gatshel">Pema Gatshel</option>
<option value="Punakha">Punakha</option>
<option value="Samdrup Jongkhar">Samdrup Jongkhar</option>
<option value="Samtse">Samtse</option>
<option value="Sarpang">Sarpang</option>
<option value="Thimphu">Thimphu</option>
<option value="Trashigang">Trashigang</option>
<option value="Trashi Yangtse">Trashi Yangtse</option>
<option value="Trongsa">Trongsa</option>
<option value="Tsirang">Tsirang</option>
<option value="Wangdue Phodrang">Wangdue Phodrang</option>
<option value="Zhemgang">Zhemgang</option>
</select>
<label >Geog:</label>
<select id="user_geog" name="geog" >
<option> select geog</option>
</select>
javascript (which I implement it in the view.php instead of js folder)
$(document).ready(function(){
$('#user_dzongkhag').change(function(){
$('#user_geog').html('<option> Fetching...</option>');
var user_dzongkhag =$('#user_dzongkhag').val();
//alert(new_div);
$.ajax({
type:"post",
data:"user_dzongkhag="+user_dzongkhag,
url:"<?php echo site_url('ajax/select_auth_geog/'); ?>",
cache:false,
success:function(resp){
//alert(resp);
$('#user_geog').html(resp);
}
});
});
});
controller.php
public function select_auth_geog(){
$user_dzongkhag= $this->input->post('user_dzongkhag');
$returnGeog=$this->ajax_model->select_auth_geog($user_dzongkhag);
foreach ($returnGeog as $key) {
echo '<option value="'.$key['name'].'">'.$key['name'].' </option>';
}
}
model.php
public function select_auth_geog($user_dzongkhag){
if($user_dzongkhag=='Bumtang'){
$user_dzongkhag=1;
}elseif($user_dzongkhag=='Chhukha'){
$user_dzongkhag=2;
}elseif($user_dzongkhag=='Dagana'){
$user_dzongkhag=3;
}elseif($user_dzongkhag=='Gasa'){
$user_dzongkhag=4;
}elseif($user_dzongkhag=='Haa'){
$user_dzongkhag=5;
}elseif($user_dzongkhag=='Lhuntse'){
$user_dzongkhag=6;
}elseif($user_dzongkhag=='Monggar'){
......
........
Try switching these two lines, you may be deleting the select box value before it is stored in user_dzongkhag.
$(document).ready(function(){
$('#user_dzongkhag').change(function(){
$('#user_geog').html('<option> Fetching...</option>'); <-------------
var user_dzongkhag =$('#user_dzongkhag').val(); <-------------
//alert(new_div);
$.ajax({
type:"post",
data:"user_dzongkhag="+user_dzongkhag,
url:"<?php echo site_url('ajax/select_auth_geog/'); ?>",
cache:false,
success:function(resp){
//alert(resp);
$('#user_geog').html(resp);
}
});
});
});
Related
i have two select option list with values retrieved from db .
<select id="userid" onchange="selSuj()">
<option value="1" selected="selected">text1</option>
<option value="2">text2</option>
<option value="3">text3</option>
</select>
<select id="subject">
<div id="determineSubj">
<option value="1" selected="selected">text1</option>
<option value="2">text2</option>
<option value="3">text3</option>
</div>
</select>
<script>
function selSuj(){
var x = $('#userid').val();
$.ajax({
type:'POST',
url:'same page url',
data:{
'userid':x
},
success: function(result){
document.getElementById("determineSubj").innerHTML = result;
}
})
;
}
the first select option(userid),when option selected, should populate the corresponding values in the second select option(subject), using the user option value(eg 1,2,3) as search p.key to the subject db.
I have tried using ajax, it worked out well on alert(result), but does not update the second select option values. please help.
A select should not contain a <div>.
As we can see from this brief demo, doing so makes the div inaccessible to JavaScript, because it doesn't consider it to be a valid part of the DOM:
document.addEventListener("DOMContentLoaded", function() {
console.log(document.getElementById("determineSubj"));
});
<select id="subject">
<div id="determineSubj">
<option value="1" selected="selected">text1</option>
<option value="2">text2</option>
<option value="3">text3</option>
</div>
</select>
In any case, even if it was valid, it's entirely unnecessary for your purpose. You can just update the HTML of the select element directly.
Change the HTML to:
<select id="subject">
<option value="1" selected="selected">text1</option>
<option value="2">text2</option>
<option value="3">text3</option>
</select>
And the "success" callback to:
success: function(result) {
document.getElementById("subject").innerHTML = result;
}
and there shouldn't be any problem.
I have this problem ... I want to make the show hide some dropdowns with ajax, I don't know where to place the show hide code ... it only shows the first country, after selecting the country will appear and choose the city state to appear. ... can you help me fix this code?
this is my code and script
<div class="frmDronpDown">
<div class="row">
<label>Country:</label><br/>
<select name="country" id="country-list" class="demoInputBox" onChange="getState(this.value);">
<option value disabled selected>Select Country</option>
<?php
foreach($results as $country) {
?>
<option value="<?php echo $country["id"]; ?>"><?php echo $country["country_name"]; ?></option>
<?php
}
?>
</select>
</div>
<div class="row">
<label>State:</label><br/>
<select name="state" id="state-list" class="demoInputBox" onChange="getCity(this.value);">
<option value="">Select State</option>
</select>
</div>
<div class="row">
<label>City:</label><br/>
<select name="city" id="city-list" class="demoInputBox">
<option value="">Select City</option>
</select>
</div>
</div>
function
getState(val) {
$.ajax({
type: "POST",
url: "getState.php",
data: 'country_id=' + val,
success: function(data) {
$("#state-list").html(data);
getCity();
}
});
}
function
getCity(val) {
$.ajax({
type: "POST",
url: "getCity.php",
data: 'state_id=' + val,
success: function(data) {
$("#city-list").html(data);
}
});
}
You can use .prop for that. You can refer here.
You must start your script with $(document).ready(function()) so that JS will know if the page is loaded and ready.
Then consider this logic here. (Example code)
if($("#country-list option:selected").index() == 0){
$("#state-list").prop("hidden", true);
}else{
$("#state-list").prop("hidden", false);
}
The code above actually checks if the country-list items is not selected when the page loaded, the other dropdown will consider it as hidden, or else it is shown.
Add a hidden class to state and city drop-downs in HTML to hide them from initial state.
Display the state drop-down when country is selected.
If 'Select' option is selected/ value is cleared, then add the hidden class to the cascading drop-downs
var
stateContainer = $('.state-container'),
cityContainer = $('.city-container'),
countryList = $('#country-list'),
stateList = $('#state-list'),
cityList = $('#city-list');
countryList.on('change', function() {
if (this.value === '') {
stateContainer.addClass('hidden');
cityContainer.addClass('hidden');
stateList.val('');
cityList.val('');
} else {
stateContainer.removeClass('hidden');
//getState(this.value);
}
});
stateList.on('change', function() {
if (this.value === '') {
cityContainer.addClass('hidden');
cityList.val('');
} else {
cityContainer.removeClass('hidden');
//getCity(this.value);
}
});
.hidden {
display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="frmDronpDown">
<div class="row">
<label>Country:</label><br/>
<select name="country" id="country-list" class="demoInputBox" >
<option value="" selected>Select Country</option>
<option value="A">Country A</option>
</select>
</div>
<div class="row state-container hidden">
<label>State:</label><br/>
<select name="state" id="state-list" class="demoInputBox" >
<option value="">Select State</option>
<option value="A">State A</option>
</select>
</div>
<div class="row city-container hidden">
<label>City:</label><br/>
<select name="city" id="city-list" class="demoInputBox">
<option value="">Select City</option>
<option value="A">City A</option>
</select>
</div>
</div>
I have a dropdown list with 5 options, whenever I click the submit button in the modal, the value posted to the controller is not the one I had selected.
Here is my view code
<div class="form-group">
<div class="col-md-4">
<select class="form-control" name="procode" id="procode" >
<option value="AOC">AOC</option>
<option value="ATN">ATN</option>
<option value="AOC">APS</option>
<option value="ATN">ADS</option>
<option value="AOC">ATW</option>
<option value="ATN">ATB</option>
</select>
</div>
</div>
And my ajax code for submiting the data to controller is here
var url;
url = "<?php echo site_url('person/ajax_add_claim')?>";
$.ajax({
url : url,
type: "POST",
data: $('#formclaim').serialize(),
dataType: "JSON",
success: function(data)
{
if(data.status)
{
$('#modal_form').modal('hide');
$('#modal_form').removeData();
reload_table();
}
else
{
for (var i = 0; i < data.inputerror.length; i++)
{
$('[name="'+data.inputerror[i]+'"]').parent().parent().addClass('has-error');
$('[name="'+data.inputerror[i]+'"]').next().text(data.error_string[i]);
}
}
$('#btnSave').text('save');
$('#btnSave').attr('disabled',false);
},
error: function (jqXHR, textStatus, errorThrown)
{
$('#btnSave').text('save');
$('#btnSave').attr('disabled',false);
}
});
This is a silly question to answer. But here you go:
<div class="form-group">
<div class="col-md-4">
<select class="form-control" name="procode" id="procode" >
<option value="AOC">AOC</option>
<option value="ATN">ATN</option>
<option value="APS">APS</option>
<option value="ADS">ADS</option>
<option value="ATW">ATW</option>
<option value="ATB">ATB</option>
</select>
</div>
</div>
Do you notice the difference?
The option in your dropdown contains similar values, that might be the cause of the problem.
<option value="AOC">AOC</option>
<option value="ATN">ATN</option>
<option value="AOC">APS</option>
<option value="ATN">ADS</option>
<option value="AOC">ATW</option>
<option value="ATN">ATB</option>
Try replacing the values with some other data. Just to test, whether the code is working or not.
Show us a bit of controller code to see what and how you are displaying the dropdown data.
Can you please share your controller function and reload_table function of Javascript. i think you are not returning accurate data from Controller function. You should use like this.
$drop_downdata = $this->db->function(your db query);
/* you pass this data to view like this create a page with this name dropdown_page.php */
$dropdown_view['page'] = $this->load->view('dropdown_page',array('data'=>$drop_downdata),TRUE);
$this->output->set_content_type('application/json')->set_output(json_encode($dropdown_view));
View Page dropdown_page.php
<?php foreach($data as $value): ?>
<li><?=$value->column_name?></li>
<?php endforeach; ?>
you will simple get this Drop down in this way
`$("#dropdown_id or class").html(response.page)`.
It will show your dropdown according to your request
I am using editable select to show drop down list.Depend on search if values is not present in table which initially generates dropdown then I check if values are present in other table and if yes then I want to reload drop down with new values.
Select in view is
<select tabindex="2" id="port_of_loading" name="port_of_loading" onkeyup="port_search()">
<option value=""></option>
<?php if(!empty($port_list))
{
foreach($port_list as $d)
{
?>
<option value="<?php echo $d->port_id; ?>"><?php echo $d->port_name; ?></option>
<?php } } ?>
</select>
and ajax is
var search_val = $("#port_of_loading").val();
$.ajax({
type:'POST',
cache:false,
async:false,
data: { 'search_val' : search_val },
url: 'URL',
success: function(data)
{
$("#port_of_loading").html(data);
}
});
I am refreshing it from controller.
consloe.log(data) output is
<select tabindex="2" id="port_of_loading" name="port_of_loading" onkeyup="port_search()">
<option value=""></option>
<option value="26">value1</option>
<option value="9">value2</option>
</select>
I have the following select:
<select id="select_produckt" class="form-control">
<option id="select_default" selected="" value="0">Vælg produkt</option>
<option value="1">NP 89,-</option>
<option value="2">NN 89,-</option>
<option value="3">NP 99,-</option>
<option value="4">NN 99,-</option>
<option value="5">NP 119,-</option>
<option value="6">NN 119,-</option>
<option value="7">NP 139,-</option>
<option value="8">NN 139,-</option>
<option value="9">NP 169,-</option>
<option value="10">NN 169,-</option>
<option value="11">NP 239,-</option>
<option value="12">NN 239,-</option>
</select>
Now, I wish to simply set the value of the select with JavaScript (meaning that the options text will be shown).
I've tried the following:
$('#select_produckt').val(2)
This, however, just left the field blank.
Can anyone tell me what the problem is?
Update
$.ajax({
type: 'POST',
url: '/Excel_Data/getSale',
data: {
request: 'ajax',
row_id: id,
list_id: list_id
},
success: function (data) {
$('#product_selection').removeClass('hidden');
alert(parseInt(data))
$('#select_produckt').val(""+data)
}
});
Try this:
$('#select_produckt').find('option')[2].selected = true;
http://jsfiddle.net/qwJKV/