I work with semantic UI and loading the dropdown options dynamically. I am loading the first dropdown on page load. while selecting the options in the first dropdown, the second dropdown will be loaded.
For example : If we select country the corresponding states will be loaded in second dropdown.
But this is not working in safari.Its working in chrome.Can anyone help me?
This is my code:
$("#selectdd1").change(function () {
$.ajax({
url: apiUrl,
dataType: 'json',
data: this.value,
type: 'GET',
success: function (ResultSet) {
$('.selectdd2').find('.menu').html("");
$('#selectdd2').empty();
var $menu = $('.selectdd2').find('.menu');
$('#selectdd2').append('<option value="">Select a Company</option>');
for (var CMPIndex = 0; CMPIndex < ResultSet.length; CMPIndex++) {
var tempValue = $.trim(ResultSet[CMPIndex].Value);
$('#selectdd2').append('<option value="' + tempValue + '" keycode="' + ResultSet[CMPIndex].Key + '">' + tempValue + '</option>');
$menu.append('<div class="item" data-value="' + tempValue + '">' + tempValue + '</div>');
};
$('#selectCompany').dropdown({
placeholder: "Select",
});
}
});
});
HTML Page
<div class="form-group selectDD1">
<select class="ui search selection dropdown dropdown-spinner
centwidth" id="dd1" name="dd1">
<option value="">Select a Broker</option>
</select>
</div>
<div class="form-group selectDD2">
<select class="ui search selection dropdown dropdown-spinner
centwidth" id="selectdd2" name="select">
<option value="">Select a Broker</option>
</select>
</div>
Related
I am unfamiliar with select dropdowns and links. If I have:
<select>
<option value="">Select</option>
<option value="/Applications.aspx">Applications</option>
<option value="/EditApplications.aspx">Edit Application</option>
<option value="/AddApplications.aspx">Add Applications</option>
</select>
<button>Go</button>
When the user selects their option, how do I link the button to when the user clicks the button, it goes to the selected page within the dropdown in ASPX? I am sure I need to bind it somehow to the codebehind but I am not sure how to do this.
A very basic solution would be something like the snippet below. On the button click read the value of the select and redirect to that url. Don't forget to add an id to the select. And you need to add type="button" to the button, otherwise it will trigger a form post.
<select id="MySelect">
<option value="">Select</option>
<option value="/Applications.aspx">Applications</option>
<option value="/EditApplications.aspx">Edit Application</option>
<option value="/AddApplications.aspx">Add Applications</option>
</select>
<button type="button" onclick="GoTOUrl()">Go</button>
<script>
function GoTOUrl() {
var url = $('#MySelect').val();
if (url === '')
return;
location.href = url;
}
</script>
No need to wire it up to the code behind. This can all be handled client side with some javascript.
Make the button an actual link. Then update the href attribute and optionally the text.
//Get relevent elements
var linkDropDown = document.getElementById("MySelect");
var link = document.getElementById("Link");
//Wire up event listener to the dropdown
linkDropDown.addEventListener("change", function() {
var defaultVal = this.options[0].value;
//Toggle the inactive class based on selected value
link.classList.toggle("inactive", this.value === defaultVal);
//Set Href
link.href = this.value;
//Set Text using ternary operation
link.text = this.value === defaultVal ? "Go.." : "Go to " + this.options[this.selectedIndex].text;
});
.inactive {
pointer-events: none;
color: grey;
}
<select id="MySelect">
<option value="/">Select</option>
<option value="/Applications.aspx">Applications</option>
<option value="/EditApplications.aspx">Edit Application</option>
<option value="/AddApplications.aspx">Add Applications</option>
</select>
Go..
It is also possible to encapsulate this to automagically work if you have more than set of this on the page.
//Get relevent elements
var dropdowns = document.querySelectorAll(".dropdownSelect");
//Wire up event listeners
for(var i = 0; i < dropdowns.length; i++){
dropdowns[i].addEventListener("change", function(event){
if(event.target.nodeName === "SELECT") {
let sel = event.target;
let link = this.querySelector(".dropdownLink");
let defaultVal = sel.options[0].value;
//Toggle the inactive class based on selected value
link.classList.toggle("inactive", sel.value === defaultVal);
//Set HREF
link.href = sel.value;
//Set Text using ternary operation
link.text = sel.value === defaultVal ? "Go.." : "Go to " + sel.options[sel.selectedIndex].text;
}
})
}
.inactive {
pointer-events: none;
color: grey;
}
<div class="dropdownSelect">
<select>
<option value="/">Select</option>
<option value="/Applications.aspx">Applications</option>
<option value="/EditApplications.aspx">Edit Application</option>
<option value="/AddApplications.aspx">Add Applications</option>
</select>
Go..
</div>
<div class="dropdownSelect">
<select>
<option value="/">Select</option>
<option value="/WebSites.aspx">Web Sites</option>
<option value="/EditWebSites.aspx">Edit Web Sites</option>
<option value="/AddWebSites.aspx">Add Websites</option>
</select>
Go..
</div>
i am getting null values
$scope.GetDepartment = function (Department) {
$http.get('/Official/GetDepartment?Department=' + Department).then(function (data) {
console.log(data);
$scope.department= data.data;
});
};
Html
<select ng-model="empModel.division" id="" name="Division" class="form-control"
ng-click = "GetDepartment(empModel.division)"
ng-change = "GetDepartment(empModel.division)"
ng-options="c.division as c.division for c in division" >
<option selected="selected">Select</option>
</select>
<select ng-model="empModel.department" id="" name="Department" class="form-control"
ng-options="d.department as d.department for d in department">
<option></option>
</select>
When i select divison i am not getting anything in department dropdown
Controller
public JsonResult GetDepartment(string Department)
{
var department = db.Depts.Where(x => x.Department == Department).
GroupBy(x => x.Department).
Select(x => x.FirstOrDefault()).
OrderBy(x => x.Department).ToList();
return Json(department);
}
Your angular part for retrieve division data
function GetDesignation(input) {
$http.get('/Official/GetDesignation?designation='+input).then(function (data) {
console.log(data);
$scope.designation = data.data;
});
};
change in HTML using ng-change directive there
<select ng-model="empModel.division" id="" name="Division" class="form-control" ng-change = "GetDesignation(empModel.division)"
ng-options="c.division as c.division for c in division" >
<option></option>
</select>
New HTML tag for load Designation data in dropdown
<select ng-model="empModel.designation" id="" name="Designation" class="form-control"
ng-options="c.designation as c.designation for c in designation" >
<option></option>
</select>
I have a SelectList in the controller that its value passed to the view by ViewData to the view as below:
List<string> available = new List<string>();
available.AddRange(product.AvailableSizes.Split(',').ToList());
ViewData["availablesize"] = new SelectList(available);
in the view i have a drop down box which display the values of the variable availablesize as below:
#Html.DropDownList("availablesize")
for some reasons i need to display this drop down box in the following format but unable to handle this issue any suggestion?
<div class="product-page-options">
<div class="pull-left">
<label class="control-label">Size:</label>
<select class="form-control input-sm">
<option>L</option>
<option>M</option>
<option>XL</option>
</select>
</div>
</div>
This code must work, you can give css attributes as well in the razor syntax.
Also Make sure your ViewData["availablesize"] has IEnumerable<SelectListItem>
Change your controller code to below
ViewData["availablesize"] = new SelectList((IEnumerable)available);
in Views syntax must be like below
<div class="product-page-options">
<div class="pull-left">
<label class="control-label">Size:</label>
#Html.DropDownList("availablesize", ViewData["availablesize"], new {#class = "form-control input-sm "})
</div>
</div>
This is the syntax that you require
If you want to style each option differently, depending on the values passed, you can use some JQuery for that:
$(document).ready(function() {
$("#availablesize option").each(function() {
if ($(this).val() != '') {
switch ($(this).val()) {
case 'S':
$(this).css('background-color', 'lightgreen');
break;
case 'M':
$(this).css('background-color', 'green');
break;
case 'L':
$(this).css('background-color', 'orange');
break;
case 'XL':
$(this).css('background-color', 'red');
break;
default:
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="availablesize">
<option value="">- select size -</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
</select>
Fiddle
I have a page which shows all Stories. I have added a filter form where you can select a priority and then the page should only show the stories with that priority. This is the form:
<form name="filter_form">
<select name="prio" class="form-control">
<option value=1>High</option>
<option value=2>Medium</option>
<option value=3>Low</option>
</select>
<button type="submit" class="btn btn-default">Filter</button>
</form>
This is the code to show all stories:
<div class="stories">
{{#each stories}}
{{> storyItem}}
{{/each}}
</div>
And this is the form handler:
Template.storiesList.events({
'submit form': function(e) {
e.preventDefault();
var prio = $(e.target).find('[name=prio]').val();
var stories = Stories.find({prio: prio});
return stories;
}
});
I guess it isn't this easy to just do a find query and return the results, because nothing happens at the moment. What am I doing wrong here?
You need to define stories as a reactive helper. Then you can use a Session variable to link the event to the list:
Template.storiesList.helpers({
'stories': function() {
return Stories.find({prio: Session.get('prio')});
}
});
Template.storiesList.events({
'submit form': function(e) {
e.preventDefault();
var prio = parseInt($(e.target).find('[name=prio]').val());
Session.set('prio'), prio);
}
});
View
...Some Codes...
<select class="form-control" style = "width:400px">
<option selected> select issue type </option>
#foreach( var item in Model._issueList)
{
<option>#item.issueName</option>
}
</select>
...Some Codes...
Output of my dropdown
dropDown: issue_one, issue_two, issue_three
Now I want to choose my issue_three in my drop down and save it in a Viewbag.select, want should be the proper code so that I can transfer the issue_three to my Viewbag.select
TEST
...foreach code...
Viewbag.select = ????
View
<select class="form-control" style = "width:400px">
<option selected> Select Company Name </option>
#foreach (var item in Model._issueList)
{
<option id="issueSelect" onclick="transferIssue('#item.issueNo')">#item.issueName</option>
}
</select>
#Html.HiddenFor( m => m.variable,new { #class = "form-control", style = "width:400px", #id = "issue" })
...Some codes...
<button type ="submit" id='submit_button'>Submit</button>
SCRIPT Use JQUERY
function transferIssue(x){ $('#issue')val(); }
jQuery(document).on('click', '#submit_button', function (ev) {
ev.preventDefault();
var _issue = jQuery('#issue').val();
var _url = '#Url.Action("Jobs")' + '?value='+ _issue;
window.location.href = _url;
});