This question already has answers here:
Does ID have to be unique in the whole page?
(14 answers)
Closed 2 years ago.
I am stuck on ajax, I have first select box, which list all countries for a sender, and I also have second select box which also list countries for a receiver. I use ajax to append the countries but the issue now is that, the second select box is not populated.
I call the country from my php function
public function country()
{
return $this->countries->getCountries();
}
My route
Route::get('/country', [ 'as' => 'customer.country', 'uses' => 'IndexController#country' ]);
my ajax now
$.ajax({
type: "get",
url: "/country",
success: function (res) {
if (res) {
$.each(res,function(key,value){
$("#country").append('<option value="'+value+'">'+value+'</option>');
});
}
}
});
and My select box is as follow
For Sender:
<div class="col col-md-6">
<div class="form-group">
<label class="required">Receiver Country</label>
<select id="country" class="form-control" required>
<option selected disabled>Select Country</option>
</select>
</div>
</div>
Then for receiver:
<div class="col col-md-6">
<div class="form-group">
<label class="required">Receiver Country</label>
<select id="country" class="form-control" required>
<option selected disabled>Select Country</option>
</select>
</div>
</div>
Now only the select box for sender always populated but the receiver will not. Pls how can I get the two select box populated using the ajax?.
UPDATED...pls check
you used the same id for the two Select, try something like that:
if (res) {
$.each(res,function(key,value){
$("#country_sender").append('<option value="'+value+'">'+value+'</option>');
$("#country_receiver").append('<option value="'+value+'">'+value+'</option>');
});
}
Related
Hi i needed some help where if i select a drop down and select from ajax option and a hidden input field appear how can i do it ?
<div class="form-row">
<div class="col">
<label for="select-price-mode" class="col-form-label">Price Mode</label>
<select class="select-price-mode custom-select-sm col-10" id="select-price-mode" required>
<option selected disabled value="">Select ....</option>
</select>
</div>
<div class="col" hidden>
<label for="select-payment-frequency" class="col-form-label">Payment Frequency</label>
<select class="select-payment-frequency custom-select-sm col-10" id="select-payment-frequency" required>
<option selected disabled value="">Select ....</option>
</select>
</div>
This is my ajax
// Here the calling Ajax for the drop down menu below
$.ajax({
// The url that you're going to post
/*
This is the url that you're going to put to call the
backend api,
in this case, it's
https://ecoexchange.dscloud.me:8080/api/get (production env)
*/
url:"https://ecoexchange.dscloud.me:8090/api/get",
// The HTTP method that you're planning to use
// i.e. GET, POST, PUT, DELETE
// In this case it's a get method, so we'll use GET
method:"GET",
// In this case, we are going to use headers as
headers:{
// The query you're planning to call
// i.e. <query> can be UserGet(0), RecyclableGet(0), etc.
query:"PriceModeGet()",
// Gets the apikey from the sessionStorage
apikey:sessionStorage.getItem("apikey")
},
success:function(data,textStatus,xhr) {
console.log(data);
for (let option of data) {
$('#select-price-mode').append($('<option>', {
value: option.PriceMode,
text: option.PriceMode
}));
}
},
error:function(xhr,textStatus,err) {
console.log(err);
}
});
and this is my ajax response
[
{
"PriceMode": "Price By Recyclables"
},
{
"PriceMode": "Service Charger"
}
]
Where say if i select Price By Recyclables the hidden drop down list appear how can i do it ?
You can use the onchange event to trigger a check and if the user selected the value you want, then display the selectbox. You'd have to add an id to the div with the hidden prop (divToDisplay).
$("#select-price-mode").change(function() {
if(this.value === "Price By Recyclables") {
$('#divToDisplay').removeAttr('hidden');
}
});
Just invoke a function when an option is selected in first select
const checkPriceMode = () => {
let value = $('.select-price-mode').val();
$('.payment-frequency').fadeOut();
if(value === 'Price By Recyclables') $('.payment-frequency').fadeIn();
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-row">
<div class="col">
<label for="select-price-mode" class="col-form-label">Price Mode</label>
<select onchange="checkPriceMode()" class="select-price-mode custom-select-sm col-10" id="select-price-mode" required>
<option selected disabled value="">Select.....</option>
<option value="Price By Recyclables">Price By Recyclables</option>
<option value="Service Charger">Service Charger</option>
</select>
</div>
<div class="col payment-frequency" hidden>
<label for="select-payment-frequency" class="col-form-label">Payment Frequency</label>
<select class="select-payment-frequency custom-select-sm col-10" id="select-payment-frequency" required>
<option selected disabled value="">Select ....</option>
</select>
</div>
I need to load data dynamically into two child drop downs according to the selected value in a parent drop down. At the same time child drop down boxes should allow multiple option select. for example, if i select value 1 then data should be loaded to one child drop down. if i select value 2 then other child drop down should be loaded. if I select value 3 then both child drop downs should load data. I have succeeded that. but the problem is when I use selectpicker with multiple attribute in select tag, above mentioned mechanism is working, but do not show data in child drop downs. I can't figure out what is the problem in there.
My html code is below
<div class="form-group row">
<label class="col-sm-4" for="sel4">Designation:</label>
<select name="designation" id="designation" class="form-control col-sm-5">
<option value="">Select</option>
#foreach($type as $items)
<option value="{{$items->id}}">{{$items->type}}</option>
#endforeach
</select>
</div>
<div class="form-group row">
<label class="col-sm-4">Registrar Division:</label>
<label class="col-sm-4">Birth and Death Division:</label>
<select name="birth_death_div[]" multiple id="birth_death_div" class="form-control col-sm-4 selectpicker">
<option value="">Select a Birth and Death Division</option>
</select>
<label class="col-sm-4"></label>
<label class="col-sm-4 mt-2">Marriage Division:</label>
<select name="marriage_div[]" multiple id="marriage_div" class="form-control col-sm-4 mt-2 selectpicker">
<option value="">Select a Marriage Division</option>
</select>
</div>
first drop down is the parent.
following is the javascript code
$('#designation').change(function(){
var desig_type = $(this).val();
var ds= $('#ds').val();
var _token = $('input[name="_token"]').val();
$.ajax({
url:"{{ route('addregistrar.fetchdiv') }}",
method:"POST",
data:{desig_type:desig_type, ds:ds, _token:_token},
success:function(data){
data = JSON.parse(data);
if(data.division_type=="1"){
$('#marriage_div').html(data.output);
$('#birth_death_div').html('');
}
if(data.division_type=="2"){
$('#birth_death_div').html(data.output);
$('#marriage_div').html('');
}
if(data.division_type=="3"){
$('#marriage_div').html(data.output_m);
$('#birth_death_div').html(data.output_bd);
}
}
})
});
controller code
$data_m = DB::table('registrar_division') //get marriage divisions
->where('divisional_secretariat_id', $ds)
->where('div_type',$marriage_div)
->get();
$output_m = '<option value="">Select a Division</option>';
foreach($data_m as $row_m)
{
$output_m .= '<option value="'.$row_m->$id.'">'.$row_m->$name.'</option>';
}
output, output_bd are also same as output_m
Data is passing correctly to child drop downs. but not showing any data.
My controller code is much long and it is working fine. Problem occurred when added selectpicker class to select tag.
Any help would be grateful.
When clicked, I want to go these links, but it doesn't work.
How can I make it work? Thanks.
<div class="col-lg-2">
<label class="control-label" for="Level">Filter</label>
<select id="EType" class="form-control" name="EType">
<option value="#Url.Action("Approver","Degree", new { Area = "Options", value=3 } )">ID</option>
<option value="#Url.Action("Approver","Degree", new { Area = "Options", value=4 } )">ID2</option>
</select>
</div>
You can use this example. This is not MVC framework problem. Probably you used asp.net web form. This framework not working web form. You must use javascript methods. I create an example fastly for you with jQuery.
// find elements
var selectItem = $("#EType")
// handle select and go to link
selectItem.on('change', function(){
location.href = $(this).val();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-2">
<label class="control-label" for="Level">Filter</label>
<select id="EType" class="form-control" name="EType">
<option value="#">Select and go</option>
<option value="https://omer.mollamehmetoglu.com">ID</option>
<option value="https://www.onedio.com">ID2</option>
<option value="https://www.stackoverflow.com">ID3</option>
</select>
</div>
I have a select drop-down that i populate from an api, i want to be able to populate a second select drop-down based on the user's first choice and subsequently populate a second drop-down based on the user's second choice.
Say i have my input fields so
form.component.html
<div class="form-group col-sm-6">
<label> Category</label>
<select class="form-control" [(ngModel)]="product.productCategory" [formControl]="productForm.controls['productCategory']" require>
<option *ngFor="let item of categorys" [value]="item.slug">{{item.name}}</option>
</select>
</div>
<div class="form-group col-sm-6">
<label> Product Type</label>
<select class="form-control" [(ngModel)]="product.productType" [formControl]="productForm.controls['productType']" require>
<option *ngFor="let item of productTypes" [value]="item.slug">{{item.name}}</option>
</select>
</div>
<div class="form-group col-md-6">
<label>Sub-Category</label>
<select class="form-control" [(ngModel)]="product.subCategory" [formControl]="productForm.controls['subCategory']" require>
<option *ngFor="let item of subs" [value]="item.slug">{{item.name}}</option>
</select>
</div>
As it is i am binding the whole list to each individual select drop-down but i want the subCategory to be only those under the selected category and same then productType based on the subCategory selected.
This is how i retrieve the category as it is the parent selection
form.component.ts
fetchCategorys() {
this.categorySrv.fetchCategories().then((response: any) => {
this.categorys = response;
console.log(this.categorys);
})
.catch(error => this.error = error)
}
I am using same method to get the subCategory and productType respectively. As you can see it brings all the items in each section from db but i want to be able to bind subCategory based on the choice of category and also bind productType based on the choice of subCategory.
Note that console.log(this.categorys) displays the category with their respective subCategory and productType but i can't figure out how to make the binding correspond.
Template
<div class="form-group col-sm-6">
<label> Category</label>
<select class="form-control" (change)="categoryChange($event)" [(ngModel)]="product.productCategory" [formControl]="productForm.controls['productCategory']" require>
<option *ngFor="let item of categorys" [value]="item.slug">{{item.name}}</option>
</select>
</div>
<div class="form-group col-sm-6">
<label> Product Type</label>
<select class="form-control" (change)="productTypeChanged($event)" [(ngModel)]="product.productType" [formControl]="productForm.controls['productType']" require>
<option *ngFor="let item of productTypes" [value]="item.slug">{{item.name}}</option>
</select>
</div>
<div class="form-group col-md-6">
<label>Sub-Category</label>
<select class="form-control" [(ngModel)]="product.subCategory" [formControl]="productForm.controls['subCategory']" require>
<option *ngFor="let item of subs" [value]="item.slug">{{item.name}}</option>
</select>
</div>
Component
public allProductTypes: ProductType[];
public allSubs: Category[];
public categoryChange( $event: Category ) {
this.productTypes = this.allProductTypes.filter( _productType => _productType.belongsTo( $event));
}
public productTypeChanged( $event: ProductType ) {
this.subs = this.allSubs.filter( _sub => _sub.belongsTo( $event ) );
}
So you bind your to the dropdown change events. Then, each time a category or product type is chosen, we filter the data that the dropdowns have available to show.
You will also probably have to reset the downstream choices, aka. when changing category, then reset product type and sub cat, because the new top level category might not allow for the old type and subcat values to exist.
This question already has answers here:
Get selected value in dropdown list using JavaScript
(33 answers)
Closed 8 years ago.
I written the following code using thymeleaf
<div class="form-group">
<div class="col-xs-12 col-sm-9">
<div class="clearfix">
<label
class="control-label col-xs-12 col-sm-4 no-padding- right"
for="name">System</label> <select
class="tbrightspace input-large" id="userCategory"name="systemId"
style="margin: 0px 0px 10px 0px; padding: 0px; width:42%;">
<option th:text="--Select--">Select</option>
<option th:each="roles:${systemList}"
th:value="${roles.systemId}"
th:selected="${roles.systemName}"
th:text="${roles.systemName}" />
<!-- <option value="101">Collections Management</option>
<option value="102">CHD</option>
<option value="103">Client Tools</option> -->
</select>
</div>
</div>
</div>
in this DropDown box,three data are loaded.Now i want to get the selected data ID,because i want to findall data in DB table by passing the ID in ajax url,Like
$.ajax({
url: "/collection-ui/api/permissions/findall/id", //http://localhost:8080
success: function( treeData ) {
var tree = $("#tree2").dynatree("getTree");
var rootNode = $("#tree2").dynatree("getRoot");
I juz tried like
<script th:inline="javascript">
/*<![CDATA[*/
var id=/*[[#{{id}(id=${systemList.get(0).systemId})}]]*/
alert(id);
/*]]>*/
</script>
This is alert or give the first object id data only.But i want to get the ID while select the data in dropdown box.How can i?? plz anybody help
Try this
$("#dropdown").on('change',function(){
var getValue=$(this).val();
alert(getValue);
});
Another approach:
$('#dropdown').change(function(){
var id = $(this).find('option:selected').attr('id')
})
Although this is almost duplicate of Old Post
But you want ID so you can try something like this..
HTML:
<select id="ddlViewBy">
<option id="s1" value="1">test1</option>
<option id="s2" value="2" selected="selected">test2</option>
<option id="s3" value="3">test3</option>
</select>
<a name="ding" onclick="test()">Click me!!</a>
Javascript:
function test(){
var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].id;//text
alert(strUser);
return false;
}
Here is working jsFiddle