in a html form I have an input with text type, and select menu with a few options!
I want to change the value of input to that options value I select it from Select menu
I think I can do it with jQuery or js
example:
<input type="text" name="title" value="some text">
<select onchange="onCategoryChange(this)" name="catlist[]">
<option value="1" style="color: black">text1</option>
<option value="2" style="color: black">text2</option>
<option value="3" style="color: black">text3</option>
<option value="4" style="color: black">text4</option>
</select>
I think you understand that the input is the title and options are the categories!
If someone select option with value=1 then the value of input would be "text1"
I want that the value of title and category be same!
$("select[name='catlist[]']").change(function () {
$("#inputID").val($(this).find("option:selected").text());
});
DEMO HERE
F.Y.I.
From the :checked Selector API Docs
The :checked selector works for checkboxes and radio buttons.
For select elements, use the :selected selector.
$("select").change(function(){
$("input").val($(this).find("option:checked").text());
});
http://jsfiddle.net/DerekL/QMXEn/
Related
How, using only HTML and CSS, to make it so that when I select an option in <select>, my input is filled in?
Here is my code
<select class="cod_art" name="cod_art" id="cod_art_01">
<option value="Default1">Default1</option>
<option value="Default2">Default2</option>
</select>
<input type="text" id="descrizione_01" name="descrizione" readonly>
So, if I select Default1 option, in input will fill a text, for example "example1". Just to make text in input different from the option value
How can I do it in JS?
window.onload = function(){
document.getElementById("descrizione_01").value = document.getElementById("cod_art_01").options[0].dataset.text;
};
document.getElementById("cod_art_01").addEventListener("change", function(e){
document.getElementById("descrizione_01").value = e.target.options[e.target.selectedIndex].dataset.text;
});
<select class="cod_art" name="cod_art" id="cod_art_01">
<option value="Default1" data-text="Example1">Default1</option>
<option value="Default2" data-text="Example2">Default2</option>
</select>
<input type="text" id="descrizione_01" name="descrizione" readonly>
I have the following code:
<select name="search[active]" class="form-control" placeholder="Active" />
<option value="1">True</option>
<option value="0">False</option>
</select>
And I want to select an option by value, for example, select True, for this I try whit the following code:
$('[name="search[active]"').text(True);
and
$('[name="search[active]"').val(True);
and not work.
Any idea?
Thanks
The selector by value will be like :
$('[name="search[active]"] option[value=1]').text();
And the selector by text will use :contains() like :
$('[name="search[active]"] option:contains(True)').val();
//Select By value
console.log($('[name="search[active]"] option[value=1]').text());
console.log($('[name="search[active]"] option[value=0]').text());
//Select By text
console.log($('[name="search[active]"] option:contains(True)').val());
console.log($('[name="search[active]"] option:contains(False)').val());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="search[active]" class="form-control" placeholder="Active">
<option value="1">True</option>
<option value="0">False</option>
</select>
I'm tring to implement an AutoComplete feature for an Input tag.
When I start typing, I get the dropdown, then I select one of the items.
When I'm trying to reach the selected item, I just get the 1st option from the options list instead of the one I chose.
This is what it looks like:
<input id="chosenTxt" list="someList">
<datalist id="someList">
<select id="selectList">
<option value="First" label="one" />
<option value="Second" label="two" />
<option value="Third" label="three" />
</select>
</datalist>
</input>
Then for example I choose "Second" and use
$("#selectList option:selected").attr("label")
I get "one".
FYI : I know this is built in jQuery UI, but I don't wanna use it.
You need to listen for the input event on the input element and iterate over
the options, checking if the input value is equal to the value of one of the options.
You can access the options of the datalist element from the options property on the datalist.
Here is an example.
$('#chosenTxt').on('input', function() {
$that = $(this);
$.each($('#someList')[0].options, function(idx, opt) {
if($that.val() == opt.value) {
console.log(opt.label)
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="chosenTxt" list="someList">
<datalist id="someList">
<select id="selectList">
<option value="First" label="one" />
<option value="Second" label="two" />
<option value="Third" label="three" />
</select>
</datalist>
I have a form, where you can dynamically add steps by clicking a button. Each step contains different input fields. One step has a ,which is filled with some options like this.
<select id="zutatenListe" name="zutatenListe" onchange="updateZutaten()">
<option value="0">Tomate</option>
<option value="1">Brot</option>
</select>
It is possible that there are multiple of it, all with the same id and name.
Next to the select, there is always an input field like this:
<input id="selectedZutat" type="text" value="" name="wiegen_zutat[]">
What I want to make is that when you change the selected option, your selected option will be shown only in the input element next to the changed select. It works for the first one, but for all other selects, it doesn't. My code is this:
function updateZutaten(){
var eingabe;
eingabe = $("#zutatenListe option:selected").text();
$( "#selectedZutat").val(eingabe);
}
My guess is that it only works for the first select element, because the other select elements have the same id. Has anyone an idea how to take care of this problem?
Please don't get confused by the German names, but I'm from Germany.
Thank you everyone :)
Identifiers must be unique and as you are using jquery bind event using it.
Add a common class to target the <select> element, this will help you select them using Class Selector (".class") and bind event using it, then you can use .next() target the next <input> element.
Here in exmple I have added zutatenListe class to <select> element.
$(function() {
$(document).on('change', '.zutatenListe', function() {
var text = $(this).find("option:selected").text();
$(this).next(".selectedZutat").val(text);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<select class="zutatenListe" name="zutatenListe">
<option value="0">Tomate</option>
<option value="1">Brot</option>
</select>
<input class="selectedZutat" type="text" value="" name="wiegen_zutat[]">
</div>
<div>
<select class="zutatenListe" name="zutatenListe">
<option value="0">Tomate</option>
<option value="1">Brot</option>
</select>
<input class="selectedZutat" type="text" value="" name="wiegen_zutat[]">
</div>
Maybe work on the change() event?
$("#zutatenListe").change( function () {
var eingabe;
eingabe = $("#zutatenListe option:selected").text();
$( "#selectedZutat").val(eingabe);
})
So it will always set the selected option when the change event fires?
Use unique ID attributes for each set of input and selects. HTML and Jquery require this.
HTML4 Spec
HTML5 Spec
Here's a way to do it in JavaScript.
function updateZutaten(element) {
var option = element.options[element.selectedIndex];
var parent = element.parentElement;
var textBox = parent.getElementsByTagName("input")[0];
textBox.value = option.text;
}
.formItems {
list-style-type:none;
padding:0;
margin:0;
}
.formItems li {
border-bottom:1px solid #EEE;
padding: 10px 0;
}
<form id="myForm">
<ul class='formItems'>
<li>
<select id="zutatenListe"
name="zutatenListe"
onchange="updateZutaten(this)">
<option value="">--Choose--</option>
<option value="0">Tomate</option>
<option value="1">Brot</option>
</select>
<input id="selectedZutat"
type="text" value=""
name="wiegen_zutat[]"
/>
</li>
<li>
<select id="zutatenListe"
name="zutatenListe"
onchange="updateZutaten(this)">
<option value="">--Choose--</option>
<option value="0">Tomate</option>
<option value="1">Brot</option>
</select>
<input id="selectedZutat"
type="text" value=""
name="wiegen_zutat[]"
/>
</li>
</ul>
</form>
I have an element:
<input type="text" Title="test" choices="aucune|0| testA|1| testB|2|" />
I'd like to select value with id 2, how can I achive this?
Solution:
I found solution on this post:
When you have more than 20 items in an input select it changes to an input text linked to an hidden for selected value
http://geekswithblogs.net/SoYouKnow/archive/2011/04/06/setting-sharepoint-drop-down-lists-w-jquery---20-items.aspx
Use select
<select>
<option value="0">aucune</option>
<option value="1">testA</option>
<option value="2" selected>testB</option>
</select>