Develop Reference

If the option is selected, fills in the input

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>

Select value in select by text when select have a value?

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>

jQuery Select nested in DataList tag - can't get the selected item

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>

Text box not changes for default drop down value in javascript

I have a txtSubTotal text box, a discount drop down and a txtGrossTotal text box. txtSubTotal text box is updating when the ADD button is clicked. txtGrossTotal text box is updating when the drop down value is selected. But, when updating the txtSubTotal text box, at the same time txtGrossTotal text box should be updated for the default drop down value, which is "0". Here, txtGrossTotal should be the value of txtSubTotal.
Below is my code, it doesn't display the txtGrossTotal when the drop down has it's default value. (But, after selecting another option, and again select the default value, it updates the txtGrossTotal.)
function discountedGrossTotal(dropdownVal){
var discountOption = document.getElementById("discount"),
subTotal = document.getElementById("txtSubTotal"),
grossTotal = document.getElementById("txtGrossTotal").value;
grossTotal.value = subTotal.value - (subTotal.value * dropdownVal/100);}
discount drop down
<select class="select" id="discount" name="discount" onchange="discountedGrossTotal(this.value);">
<option selected>0</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
txtGrossTotal HTML
<div id="gross_total_div">
<input name="txtGrossTotal" type="text" id="txtGrossTotal" size="15" readonly/>
</div>

Basically you want to take the same action by changing the "discount" dropdown value as well as the "subtotal" textbox value. So, you will have to call the same function on both.
You can achieve this by doing below modifications in your code:
Remove the parameters from "discountedGrossTotal" function
Add a new variable inside your function like dropdownVal = document.getElementById("discount").value
Call the same function on change event of your "txtSubTotal" textbox
Now, this function will be called if any of these (textbox or dropdown) value is changed and hence the "Gross Total" value will be updated accordingly.

Please Try this, it should work for you...
function discountedGrossTotal() {
var dropdownVal= document.getElementById("discount").options[document.getElementById("discount").selectedIndex].innerHTML;
subTotal = document.getElementById("txtSubTotal");
grossTotal = document.getElementById("txtGrossTotal").value;
document.getElementById("txtGrossTotal").value = subTotal.value - (subTotal.value * dropdownVal / 100);
}
sub total: <input type="text" id="txtSubTotal" onblur="discountedGrossTotal()" />
<br />
discount: <select class="select" id="discount" name="discount" onchange="discountedGrossTotal();">
<option selected>0</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<br />
<div id="gross_total_div">
<input name="txtGrossTotal" type="text" id="txtGrossTotal" size="15" readonly />
</div>

how to change input value with jquery?

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/