I have INPUT fields on my form which I want to collect the data input from them and store them in an ARRAY to then feed into a SELECT OPTION This is what I have so far, when it is used in the form it doesnt pick up the value from the INPUT boxes and the SELECT shows 2 empty rows, but has an ID against those rows as when I ouput the SELECT into another INPUT further on in my form it will show either 0 or 1.
How can I get the value input from the INPUT into the SELECT, also how can I then show the SELECTED option afterwards?
var MySelectOptions = [document.getElementById("inpbox1").value, document.getElementById("inpbox2").value];
$.each(MySelectOptions, function(key, value) {
$('#theselectbox').append($("<option/>", {
value: key,
text: value
}));
});
this is how I output from the SELECT, I would normally use the second example, but I don't know how to get the SELECTED Option within the code above
$(function() {
$("#theselectbox").change(function(){
var CustomerName = document.getElementById("theselectbox").value;
$('#customername').val(CustomerName);
});
});
How I normally get the SELECTED Option
$(function() {
$("#theselectbox").change(function(){
var CustomerName = $('option:selected', this).attr('theselectoption');
$('#customername').val(CustomerName);
});
});
You can append a new option with a value to select box as:
$('#theselectbox').append('<option value="'+inputValue+'">'+inputValue+'</option>');
And, you can show the selected option by using its value as:
$('#theselectbox').val(inputValue);
// Here you have the list of inputs, from which you will get values
// I will use classes, you can use ids
var inputs = ["input1", "input2"];
// The select to which you will paste the values
var sselect = $(".select-class");
for(var i = 0; i < inputs.length; i++){
var e = $("." + inputs[i]);
sselect.append("<option>"+ e.val() +"</option>");
}
// Now you can just put value to select
sselect.val("selected_value");
How select value from input
<input type="text" class="js-svalue" placeholder="Select value">
Now js
var input = $(".js-svalue");
input.on("change", function(){
sselect.val(input.val());
});
Related
I create a select box dynamically via an eventlistener.
<select name="s" id="s"></select>
becomes
<select name="s" id="s"><option value=1>1</option><option value=2>2</option>
<option value=3 selected="true">3</option></select>
I then call a js function to get the selected value. However it fails, the selectedOptions htmlcollection length is 0. But when I expand the collection I can see the selected value 0:<option value=3 selected=true> If i try to grab the value it fails e.selectedOptions[0].value If I make the dropdown static. I am able to retrieve the value.
e = document.querySelector('#s');
console.log(e.selectedOptions)
I created the same scenario regarding your prob, you can check this out by simply using the document.getElementById
const form = document.getElementById("form");
const selectField = document.createElement("select");
selectField.setAttribute("id", "s");
// iterate the option/s
for(let i= 1; i <= 3; i++){
const option = document.createElement("option");
option.setAttribute("value", i);
option.innerText = i;
selectField.append(option);
}
// append the dynamic select field into div form as an example parent
form.append(selectField);
// this get the values from your dynamic select field
document.getElementById("s").onchange = function(e){
console.log("value", e.target.value)
}
example:
Input: select option 2
Output: "2"
my source:
https://jsfiddle.net/d4q7mugh/12
I want my select box to change depending which option I choose in the first select, and I want to hide the values that are not from that option/
My HTML here:
<select id="localidad">
#foreach (ja_era.Models.Localidades localidad in ViewBag.localidades)
{
<option value="#localidad.Id">#localidad.Zona</option>
}
</select>
<select name="Localidad" id="barrio">
#foreach (ja_era.Models.Barrios barrio in ViewBag.barrios)
{
<option class="#barrio.Localidad" value="#barrio.Id">#barrio.Barrio</option>
}
</select>
The Localidad select has 4 options and bring the countries, then I have the second select that brings the cities all in one select box. Which ones are well defined in my database.
You can see here that "Barrios" has the column localidad where I insert the localidad id
I have tried some js code but can't figure it out how to make it work.
$(document).ready(function() {
$('#localidad').change(function () {
});
})
Basically you need to get the value of the selected option of the first dropdown, send it to your an action method and let it return the data for the second dropdown in json format. Then you will go through the items in the JSON array and build the markup for the options in the second dropdown.
$(document).ready(function() {
$('#localidad').change(function () {
var v = $(this).val();
var urlToGetData="#Url.Action("GetBarrios","Home")";
var items="";
$.getJSON(urlToGetData+"?id="+v,function(a,item){
items+="<option value='"+item.Value+"'>"+item.Text+"</option>";
})
$("#barrio").html(items);
});
})
Assuming you have GetBarrios action method like this
public ActionResult GetBarrios(int id)
{
var items=db.Barrios.Where(s=>s.Localidad==id)
.Select(s=> new SelectListItem {
Value=s.Id.ToString(),
Text = s.Barrio
}).ToList();
return Json(items,JsonRequestBehaviour.AllowGet);
}
I have a datalist with options and a custom attribute.
<input list="selectedItems" class="selectedItemsList"></input>
<datalist id="selectedItems">
<option value="test11" oldvalue="f1"></option>
<option value="test12" oldvalue="f2"></option>
</datalist>
It is displayed on a popup. When a popup closes the value and custom attribute value must be used in a function...
I tried:
alert($("#selectedItems option:selected").val());
alert($("#selectedItems option:selected").attr("oldvalue"));
$('.selectedItemsList option').each(function() {
if($(this).is(':selected')){
alert($(this).val());
}
});
for (var i=0; i<document.getElementById('selectedItemsList').options.length; i++)
{
if (document.getElementById('selectedItemsList').options[i].value == document.getElementsByName("selectedItems")[0].value)
{
alert(document.getElementById('selectedItemsList').options[i].value);
break;
}
}
Nothing works.
I can get the values using on-event but that is not an option for me.
$('.selectedItemsList').on('input', function() { ...
alert($(this).val());
$(function(){$("input[name=selectedItems]").on('input', function(){// selects which array raw is edited
for (var i=0; i<dList.length; i++) if(dList[i].ItemName===$(this).val()) { num = i;
$(".selectedItems option[value="+dList[num].ItemName+"]").val($(this).val());
dList[num].ItemName=$(this).val();
});
});
So, I use datalist oninput event to get the selected value. Then, I edit a raw of an array of values that represents the datalist values.
var dList=[];num=0;
dList.push({ItemName: $(this).attr('value'), ViV: vs[0], NU: vs[1], ItemKey: $(this).attr('key')});
Essentially, I believe the problem is related to your selector use. I'm making the assumption that you're trying to get the old value from the datalist. On closing your popup, you should get the value of the input first
var inputval= $(".selectedItemsList").val();
alert(inputval);
then grab the associated oldvalue based on the value of the input.
var oldval= $('datalist#selectedDevices option[value='+inputval+']').attr('oldvalue');
if (oldval)
alert(oldval);
I created a jsfiddle for you here to play around with.
http://jsfiddle.net/jornjjt6/
I have a Select Box and a Text Field input box. Currently when the User selects a value from the Select Box, then the selected value is inputted into the Text Field input box.
<select name="nSupervisor" id="iSupervisor" onchange="PopulateUserName()">
<option value="fff">fff</option>
<option value="test1">test1</option>
<option value="dd">dd</option>
</select>
<input id="iSupervisorUserName" name="OBKey_WF_Manger_Supervisor_1" type="text" />
function PopulateUserName() {
var dropdown = document.getElementById("iSupervisor");
var field = document.getElementById("iSupervisorUserName");
field.value = dropdown.value;
}
Jsfiddle
http://jsfiddle.net/Hx6J5/1/
Currently it only takes one input.
I would like it to append inputs so the field will accept more than one select value, so if the User selects "fff", "fff" will get inputted into the field.
If the User then selects "dd", the field.value should become "fff/dd" with the "/" being the separator.
function PopulateUserName() {
var dropdown = document.getElementById("iSupervisor");
var field = document.getElementById("iSupervisorUserName");
$('field').val($('field').val() + dropdown.value);
}
I have tried this but it doesn't append.
You need to give field without quotes. If field is given in quotes jQuery will try to find elements with tag name field.
Live Demo
$(field).val($(field).val() + dropdown.value);
Using pure JS:
function PopulateUserName() {
var dropdown = document.getElementById("iSupervisor");
var field = document.getElementById("iSupervisorUserName");
if ( field.value == "" ){
field.value = dropdown.value;
}else{
field.value += "/" + dropdown.value;
}
}
See the working code at:
JSFiddle
I suggest to use multi select jquery plugin:
http://harvesthq.github.io/chosen/
I need to get an index of a form element that is passed in to a .change statement.
example HTML form code
<tr><td>Question1</td><td><select class=list1 id=l[1] name=l[1]><option value=1>1<option value=2> 2 <option value=3> 3 </select></td><td><select class=hideme name=x[1] id=x[1]></select></td></tr>
<tr><td>Question2</td><td><select class=list1 id=l[1] name=l[2]><option value=1>1<option value=2> 2 <option value=3> 3 </select></td><td><select class=hideme name=x[2] id=x[2]></select></td></tr>
<tr><td>Question3</td><td><select class=list1 id=l[3] name=l[3]><option value=1>1<option value=2> 2 <option value=3> 3 </select></td><td><select class=hideme name=x[3] id=x[3]></select></td></tr>
Now the user will select 1, 2 or 3 from the first pulldown. based on that selection the second pulldown will be loaded with content.
example javascipt jquery function
$('.list1').change (function ()
{
// here is where I need to pick up the index ie: the [1] [2] or [3] as var id
var selected = $("#l[id] option:selected");
var pdata = 'subjectareaid='+selected.val();
$.ajax({
type : "POST",
cache : false,
url : "subcat.php",
data : pdata,
success: function(data) {
$('#x[id]').html(data);
$('#x[id]').removeClass('hideme');
}
});
});
This will allow me to populate the second pulldown with the options that were returned by the ajax call based on the selection from the first pulldown.
The table has 54 pulldowns that all have to have this action taken against them (this is to populate a mysql table upon form submission) the pulldowns are (l[id]) primary category (x[id]) sub-category. The subcat selection is hidden until after the main cat is picked and then the select statement is populated.
First of all add double qoutes arround your attributes ", this is best practice and will prevent errors if you use spaces in your values. Also make sure your html is valid. You didn't close the <option> tags with a </option>.
You can use a simple regex to get the index of your select element.
$('.list1').change (function () {
var id = $(this).attr('id');
var matches = id.match(/^l\[([0-9]{1,})\]/);
if (matches) {
var index = matches[1];
}
});
You can get the select element changed at the moment with $(this) instead of var selected = $("#l[id] option:selected");
You can reach the index of the changing select by reaching index of parent tr element of that select element by using closest() selector of jQuery.
Finally the code block you need, should be like that:
var selected = $(this);
var selectedIndex = selected.closest("tr").index();
var pdata = 'subjectareaid='+selected.val()+"&index="+selectedIndex;