I have a set of countries, and each country has a set of cities.
I want to print a dropdown where the user selects a country, and then for that selected country I want to display all cities in another dropdown.
However, how can I know which country was selected?
handleSelect: function(indexOfSelectedCountry){
},
render: function(){
var countryNames = this.props.countries.map(function(elem){
return <option>{elem.name}</option>
});
return(
<div>
<p>Select category</p>
<div class="dropdown">
<select class="form-control" onselect={this.handleSelect(What do I put here?)}>
{countryNames}
</select>
</div>
</div>
)
}
I want to do something like the above, but I don't know how to pass the result of the selection to a listening method.
You don't have to put anything in your parenthesis, this is how you retrieve the selected value (notice the onChange and event usage)
handleSelect: function(event) {
var optionValue = event.target.value
...
},
render: function(){
var countryNames = this.props.countries.map(function(elem){
return <option>{elem.name}</option>
});
return(
<div>
<p>Select category</p>
<div class="dropdown">
<select class="form-control" onChange={this.handleSelect}>
{countryNames}
</select>
</div>
</div>
)
See https://facebook.github.io/react/docs/forms.html
Try This:
<select class="form-control" onChange={ e => this.handleSelect(e.target.value)}>
{countryNames}
</select>
try like this:
handleSelect: function(event){
console.log(event.target.value);
},
render: function(){
var countryNames = this.props.countries.map(function(elem){
return <option>{elem.name}</option>
});
return(
<div>
<p>Select category</p>
<div class="dropdown">
<select class="form-control" onselect={this.handleSelect}>
{countryNames}
</select>
</div>
</div>
)
}
Related
Firstly my english is not good. Sorry about that.
1-) My case is: when I write the necessary info into the gaps,- for example job name for one gap and for the other gap the city name(like istanbul)- I want to see the jobs in that city on page.
2-) Also, when i use the box to search for something, i need to use capital letters in order to see result. I want to see the result no matter how i type the letter, capital or not, How can i achieve this?
Thanks for all help.
this is full code
var app = new Vue({
el: "#app",
data: {
founded: [],
search: "",
show: false,
city: ""
},
created() {
fetch("job.json")
.then(res => {
return res.json();
})
.then(res => {
this.founded = res.items;
});
},
computed: {
filteredFounded: function() {
return this.founded.filter(items => {
return (
items.cityName === this.city && items.positionName.match(this.search)
);
});
}
}
});
<div class="header">
<h4>Get Job</h4>
</div>
<div id="app" class="nested">
<div class="card w-50">
<div class="search">
<input type="text" class="job" v-model="search" placeholder="Job..." #keypress.enter="founded">
<select name="" class="city" id="" v-model="city">
<option value="Seçiniz">Seçiniz</option>
<option value="İstanbul">İstanbul</option>
<option value="Ankara">Ankara</option>
<option value="İzmir">İzmir</option>
<option value="Çanakkale">Çanakkale</option>
</select>
</div>
<div class="find">
<button #click="show = true">Find!</button>
</div>
<div class="card-body" v-show="show" v-for="items in filteredFounded">
<h5 class="card-title">{{items.companyName}}</h5>
<p class="card-text">{{items.positionName}}</p>
<p class="card-text">{{items.cityName}}</p>
<p class="card-text">{{items.townName}}</p>
<p class="card-text">{{items.distance}}</p>
Go!
</div>
</div>
</div>
and this is job.json file
You can achieve this by first turning the required data into lower or uppercase letters. You do this using the toLowerCase() or toUpperCase() functions and then compare the data. For example, you can do something like this.
computed: {
filteredFounded: function () {
return this.founded.filter(items => {
return (
items.cityName.toLowerCase() === this.city.toLowerCase() && items.positionName.toLowerCase().match(this.search.toLowerCase())
);
});
}
}
I want to select multiple subjects across one course but can't do so
I have two dropdown lists one for course selection and one for subjects selection. For multiple selection of the subjects I use the angular-chosen plugin, I can select multiple subjects only in the case when the Course is not selected from the dropdown list. But when I select the Course from the dropdown list then I can't select even one subject from the dropdown list
Following is my AddCourseController.js and related HTML
(function() {
var myApp = angular.module("myApp");
var AddCourseController = function($scope, CourseService, TeacherService) {
var onCourses = function(courses) {
$scope.courses = courses;
}
var onError = function(response) {
$scope.error = true;
$scope.errors = response.data;
};
CourseService.courses().then(onCourses, onError);
TeacherService.getSubjects().then(function(data) {
$scope.subjects = data
});
};
myApp.controller("AddCourseController", AddCourseController);
}());
<div class="form-group">
<label>Select Course</label>
<select ng-model="course" class="form-control"
ng-options="course.IdCourse as course.Name for course in courses track by course.IdCourse">
</select>
</div>
<div class="form-group" ng-class="{ 'has-error' :
addCourseForm.subjects.$invalid && !addCourseForm.subjects.$pristine }">
<label class="pull-left">Select Subjects</label>
<a class="pull-right btn btn-primary btn-xs" data-toggle="modal" data- target="#add-subject">Add Subject</a>
<select chosen multiple class="form-control"
ng-model="course.subjects"
ng-options="subject.IdSubject as subject.Name for subject in subjects">
</select>
<p ng-show="addCourseForm.subjects.$invalid &&
!addCourseForm.subjects.$pristine" class="help-block">Subject is required.
</p>
</div>
Change the course selector to return the entire course object to the ng-model:
<div class="form-group">
<label>Select Course</label>
<select ng-model="course" class="form-control"
ng-options="course ̶.̶I̶d̶C̶o̶u̶r̶s̶e̶ as course.Name for course in courses track by course.IdCourse">
</select>
</div>
Here is a dropdown :
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Role</label>
<select ng-model="User_Role" class="dropdown form-control" ng-options="t.RoleName for t in rollist track by t.ID">
<option value="" >-- Choose Role --</option>
</select>
</div>
</div>
the dropdown bind here:
$scope.rolelist = function () {
var role = UserService.getroleInfo();
role.then(function (d) {
//debugger;
$scope.rollist = d.data;
}, function (err) {
//debugger;
alert("Some Error Occured ");
});
}
how do selected the dropdown dynamic value in angularjs??
here is the dynamic dropdown <option label="Admin" value="1" >Admin</option>
can any one tell me how do i selected when page load using angular
Try this on your success call back :)
$scope.rollist = d.data;
$scope.User_Role=$scope.rollist[0]; // or $scope.User_Role=$scope.rollist[0].RoleName
here I used direct return in service instead of that you can use your http request in service
var app = angular.module('testApp',[]);
app.service('UserService',function(){
this.getroleInfo=function(){
return [{ID:1,RoleName:"Admin"},{ID:2,RoleName:"User"}];
};
});
app.controller('testCtrl',['$scope','UserService',function($scope,UserService){
/*+role.then(function (d) {
//debugger;
$scope.rollist = d.data;
}, function (err) {
//debugger;
alert("Some Error Occured ");
});*/
//place this below code in inside of your role.then(function(){})
$scope.rollist= UserService.getroleInfo();
$scope.User_Role={ID:2,RoleName:"User"};//here place your dynamic data
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="testApp" ng-controller="testCtrl">
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Role</label>
<select ng-model="User_Role" class="dropdown form-control" ng-options="t.RoleName for t in rollist track by t.ID">
<option value="" >-- Choose Role --</option>
</select>
</div>
</div>
</div>
You could use ng-init in the div and call a function that sets the ng-model value. for example: ng-init="assignValue()", and in the controller:
$scope.assignValue = function(){
$scope.User_Role = $scope.rollist[0]
}
I am using reactive vars to manage visibility of my input fields depenging on user's choice select. But when I choose one option, write anything in shown input, then go to the second option, and finally when I come back to the firs one, the input value disappears. Is there any way to keep that data untill confirm button pressing to confirm once all the fields values under all the options?
Here are two input groups that are displayed, when option is set:
<template name="addTour">
<label class="control-label col-xs-4" for="tour-dropdown">Программа</label>
<div class="dropdown col-xs-8 form-group form-horisontal">
<select class="form-control" id="tour-dropdown">
<option value="a">A</option>
<option value="b">B</option>
</select>
</div>
{{#if a}}
<div class="container-fluid">
{{> textfield label='a option' id='transfer-city-from'}}
{{> confirm add='a option'}}
</div>
{{/if}}
{{#if b}}
<div class="container-fluid">
{{> textfield label='b option' id='transfer-city-from'}}
{{> confirm add='b option'}}
</div>
{{/if}}
And some JS here that manages reactive variables to do all that job:
Template.addTour.onCreated( function () {
this.a = new ReactiveVar( false );
this.b = new ReactiveVar( false );
Template.addTour.helpers( {
a: function () {
return Template.instance().a.get();
},
b: function () {
return Template.instance().b.get();
}
}
});
Template.addTour.events( {
'change select': function ( event, template ) {
if ( $( event.target ).val() === "a" ) {
template.a.set( true );
} else {
template.a.set( false );
};
if ( $( event.target ).val() === "b" ) {
template.b.set( true );
} else {
template.b.set( false );
};
}
});
Or I shoud better use display:block and display:none ?
Thanks in advance for any suggestions.
So, I managed to resolve my problem with jQuery and it's hide() / show() options.
Here is the code:
<template name="addTour">
<label class="control-label col-xs-4" for="tour-dropdown">Программа</label>
<div class="dropdown col-xs-8 form-group form-horisontal">
<select class="form-control" id="tour-dropdown" >
<option value="a">A</option>
<option value="b">B</option>
</select>
</div>
<div class="container-fluid" id="a">
<div class="row">
<div class="col-sm-4">
<form class='form-horizontal'>
<div class="form-group">
<h1>A option</h1>
{{> timepicker label='время прибытия' id='transfer-time-a'}}
</div>
</form>
</div>
</div>
</div>
<div class="container-fluid" id="b">
<div class="row">
<div class="col-sm-4">
<form class='form-horizontal'>
<div class="form-group">
<h1>B option</h1>
{{> timepicker label='время прибытия' id='transfer-time-b'}}
</div>
</form>
</div>
</div>
</div>
And jQuery works for me in this view:
Dropdown = $('#tour-dropdown');
$('#a').hide();
$('#b').hide();
select = this.value;
Dropdown.change(function() {
if ($(this).val() === 'a') {
$('#a').show();
console.log('A option');
} else $('#a').hide();
if ($(this).val() === 'b') {
$('#b').show();
console.log('B option');
} else $('#b').hide();// hide div if value is not "custom"
});
It works fine and keep values inside all the hidden inputs, so I can submit all of them once.
I'm trying validate a form using jQuery-plugin. I have three usual select boxes on a form, country, state and city. As usual, the country select box is populated on page load. The two successive select boxes are populated on the onchange event of respective select boxes using Ajax.
<div>
<label> Country<span style="color: Red;">*</span></label>
<select id="cmb_country" name="cmb_country" validation="required" class="inputText" onchange="fillState(this.value,0);">
<option value=''>Select</option>
<?php $combo->combo("select country_id, country_name from country", 0);?>
</select>
</div>
<div class="clear"> </div>
<div>
<label> State<span style="color: Red;">*</span></label>
<span id="stateList">
<select id="cmb_state" name="cmb_state" validation="required" class="inputText" onchange="fillCity(this.value, 0);">
<option value=''>Select</option>
</select>
</span>
</div>
<div class="clear"> </div>
<div>
<label> City<span style="color: Red;">*</span></label>
<span id="cityList">
<select id="cmb_city" name="cmb_city" validation="required" class="inputText">
<option value=''>Select</option>
</select>
</span>
</div>
<div class="clear"> </div>
The following jQuery code always returns false after the Ajax call that prevents the form from being submitted.
var Form = function(form) {
var fields = [];
form.find("[validation]").each(function() {
var field = $(this);
if (field.attr('validation') !== undefined) {
fields.push(new Field(field));
}
});
this.fields = fields;
}
Form.prototype = {
validate: function() {
for (field in this.fields) {
this.fields[field].validate();
}
},
isValid: function() {
for (field in this.fields) {
if (!this.fields[field].valid) {
this.fields[field].field.focus();
return false;
}
}
return true;
}
}
Without using Ajax, it goes well so how to make it work after populating all the select boxes using Ajax?