Develop Reference

Set input attribute based on selected option

I'm trying to set the value of a hidden input field based on the value of a selected option from a select box
This is what I've tried.
HTML
<select id="track_type_selected">
<option value="0">51 Track 3m</option>
<option value="1">64 Track 3m</option>
<option value="2">103 Track 3m</option>
</select>
<input type="number" name="required_tracks_name" id="required_tracks_id" class="sku" sku="" disabled="">
Javascript
if ('#track_type_selected' == 1) {
'#required_tracks_id'.sku('TRACK3');
}else if('#track_type_selected' == 2) {
'#required_tracks_id'.sku('TRK30');
}else if ('#track_type_selected' == 3) {
'#required_tracks_id'.sku('TRACK-1033');
}
When the option is selected I want to set the value of the SKU.

Before i go on with the solution, i can understand that you have basic to zero knowledge about JavaScript.. make sure you understand how JavaScript syntax works then continue.
To get the selected option use this code:
var e = document.getElementById("track_type_selected");
var selectedIndex = e.options[e.selectedIndex].value;
selectedIndex variable should now include the current selected index. (1,2,3.. etc)
So you can do this:
if(selectedIndex==1){/* some code */}
Now, to get sku attribute (since you confirmed that you use jquery) you can do this:
$("#required_tracks_id").attr("sku");
Make sure you check .attr usage and edit it to your needs.

How to show the selected value from the list in Angular Js?

I am new to Angular.Js. If I hava a dropdown and and it is picking the selected data from the dropdown. I am able to do that but It is not bringing the selected value for that dropdown. What is the property I need to set so whenever I come to that page, it shows the selected value in the dropdown .
Here is a portion of my code:
<select class='form-control' id="CreateRouteType"
ng-options="createRoute.Name for createRoute in vm.CreateRouteList"
ng-model="vm.ProcessDataSettings.CreateRouteTypeId" >
<option value="vm.ProcessDataSettings.CreateRouteTypeId" selected></option>
</select>
what do I need to do to show the selected value in the dropdown as selected?

correct me if I am wrong. Are you asking when you change options, what is the value in the memory?
Looks like you have ng-model="vm.ProcessDataSettings.CreateRouteTypeId". I am sure the selected value is in the vm.ProcessDataSettings.CreateRouteTypeId ?

Look at this question: AngularJS How do I pre select the value of a dropdown when the value is retrieved from a webservice?
<select class='form-control' id="CreateRouteType"
ng-options="createRoute.Name for createRoute in vm.CreateRouteList"
ng-model="vm.ProcessDataSettings.CreateRouteTypeId" >
</select>
essentially, in your controller initialize function, you should set the value of ng-model in the select tag to what you want to be preselected. So something like this:
$scope.vm.ProcessDataSettings.CreateRouteTypeId = the object that you want to be preselected;

How to get the value of an option element with a forward slash using javascript?

I have a select element with multiple options like this one:
<option value="test/foobar">test/foobar</option>
When i try to get the value of this via
var selectedValue = select.options[select.selectedIndex].value;
all works fine as long as the value does not contain a / if there is one inside this value the content of selectedValue is only test and not test/foobar like i expect it to be.
How can I get the complete value with the / without jQuery?

This solution works for me.
select input looks like this.
<select id="selector">
<option value="test/foobar1">test/foobar1</option>
<option value="test/foobar2">test/foobar2</option>
</select>
js looks like this.
var e = document.getElementById("selector");
var selectedVal = e.options[e.selectedIndex].value;
console.log(selectedVal);

Basic java script to get combobox

I am just starting out with some java script in an asp.net mvc web site.
I current have a form which I am working on.
The first field which the user is prompted with is a combobox / select (in html)
here is the code for it:
<select name="select">
#foreach (var item in Model.networks)
{
<option value="">#Html.DisplayFor(modelItem => item.name)</option>
}
</select>
Now my next field depends on the option which they chose from the combo box.
How can I populate the next field based on the option they chose in the combo box?
So when the user navigates to the page they will ave a combo box populated with all the options. Below that will be empty fields. When the user selects a option in the combo box I want it to then populate the empty fields with the corresponding data from the option which was chosen.
How do I go about doing this?
Please give the newby answer as in the method in which it will be done. I am assuming that I will be using java script for it?

Although I cannot understand your question in detail, I hope I can help you.
HTML
If you have a select element that looks like this:
<select id=dropdown>
<option value="1">test1</option>
<option value="2" selected="selected">test2</option>
<option value="3">test3</option>
</select>
Plain Javascript solution
Running this code:
var element = document.getElementByID('dropdown');
var current = e.options[e.selectedIndex].value;
Would make current be 2. If what you actually want is test2, then do this:
var e = document.getElementById('dropdown');
var strUser = e.options[e.selectedIndex].text;
Which would make current be test2

Put the onChange="getSelectedValue" attribute of the select element and then use the following javascript.
<script>
function getSelectedValue(sel)
{
txtToFill.Text(sel.options[sel.selectedIndex].text);
}
</SCRIPT>

If I understand your question correctly you want to react to a combo box value changing and display different content in your page.
If that is the case what you need to know is
how to handle the change event in the select (drop down)
populate empty fields
Here's how you can register and handle the change event in the dropdown:
$("select[name='select']").on("change", function(){
$('#input1').val("What you want in the input goes here");
});
Here's a fiddle that demonstrates this.

mvc3 dropdownlist setting the selected value from model

I am creating a select list in my .aspx page.
<label for="AccessType" class="required"><span class="required">*</span><%=Html.Resource("accessType")%>:</label>
<select id="AccessType" name="AccessType">
<% foreach (var item in Enum.GetValues(typeof(Security.AccessType)))
{%>
<option value="<%=(int)item%>"><%=item%> </option>
<%}%>
</select><br />
Now every time I load the page it is selecting the first value as default, where as I want the value present in model to be the selected.
I am biniding the dropdown to a enum in my code. Security.AccessType is a enum and not a model. so every time the page loads it shows the selected value of the dropdown as first enum
I want the selected item to be say Model.AccessType...
I know its a very basic question but still any help?

You can give the option which you want to be default a "selected" attribute, like:
<option value="apple" selected="selected">apple</option>
If you want to select an option dynamically, you can do it by javascript. Eg:
var el = document.getElementById("AccessType");
el.selectedIndex = yourIndex; //index of the option you want to select
//or
el.value = "yourValue"; //value of the option you want to select

I used the followig and got the result..
$('#ddlAccessType').val($("#ddlAccessType option:contains('" + $('#AccessTypeValue').val() + "')").val());
This is first getting the AccessType value then checking for its index in the dropdown list and then setting the selected index to the index found out.
A bit bizzare, but worked fine for me..