Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I have a select item with in there a few options, and one of them is called "other..". What I want is that when a user clicks on "other.." a textarea will appear, I know this can be done with jQuery. Here is a short and simple version of my HTML:
<html>
<body>
<select>
<option value="opt1">Option 1</option>
<option value="opt2">Option 2</option>
<option value="opt3">Option 3</option>
<option value="opt4">Option 4</option>
<option value="other">Other..</option>
</select>
<input type="text" id="other_text" />
</body>
</html>
Add the change event to your dropdown list, which will toggle the text field if the selected value is "other":
$('select').on('change', function() {
$('#other_text').toggle(this.value === 'other');
});
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 months ago.
Improve this question
I have a select dropdown:
<select onChange={(e)=> console.log(e.target.id)} id="cars" name="carlist" form="carform" >
<option id="a" value="volvo">
Volvo
</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
I would like to get the ID a when selecting 'volvo' from the dropdown, thus getting the ID of the option, how can I achieve this?
The reason why I'm trying to get an id is because this dropdown can have multiply options with the same name (they would be separated by a line)
Use the selectedIndex to get this.
var getId = document.querySelector('#cars');
console.log(getId.options[getId.selectedIndex].id);
You can have the pass the reference of 'this' and get it from there.
something like the below answer
How to get selected option ID with Javascript not JQuery
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
I'm working on my MVC project and need to bind selected value with textbox - what I mean is when you choose an item on a selected list then this value appears in a text box. Here is an example:
<div class="row">
<select id="chasis" name="type">
<option value="sedan">sedan</option>
<option selected value="hatchaback">hatchback</option>
<option value="cabrio">cabrio</option>
<option value="coupe">coupe</option>
</select>
</div>
<label>Your choice is: <input id="chasisText" type="text" value=""></label>
and jQuery code:
<script>
$(function() {
$("select#chasis").change(function(e){
$("#chasisText").val(e.target.value);
});
});
</script>
This code works well but my question is if there is any other way to show selected value in a textbox? Maybe easier or more tricky?
add jquery cdn to head part of your HTML if you havent added, ignore if already added.
add chasisChange function to select
<select id="chasis" onchange="chasisChange()" name="type">
below Jquery function (chasisChange()) will be executed when value changes of select portion of HTML.
function chasisChange(){
var val = $('#chasis').val();
console.log(val);
$('#chasisText').val(val);
}
working example
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
I have a form with lots of inputs (checkboxes / textboxes / selects and so on).
These are search filters. I would like to submit the form on every input change.
I was thinking that I should put for every input $("...").on(change, function(){ form.submit();}), but I feel this might not be the best approach.
So, what is the best practice?
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function(){
$( ".target" ).on('change',function(e) {
console.log(e.target.value)
});
});
</script>
</head>
<body>
<form>
<input class="target" type="text">
<select class="target">
<option value="option1" selected="selected">Option 1</option>
<option value="option2">Option 2</option>
</select>
</form>
</body>
</html>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
Ok so, I have this select area in my form and also a hidden field called "insert product number". What I want to do is: if the user selects the "product" option, the hidden field will show right below the selection field. How can I do that? Thanks!
<select>
<option>Jobs</option>
<option>Products</option>
<option>Other</option>
</select>
<select id="types">
<option value="1">Jobs</option>
<option value="2">Products</option>
<option value="3">Other</option>
</select>
<input type="text" id="products" placeholder="Insert product number" style="display:none"/>
<script type="text/javascript">
$(document).ready(function(){
$("#types").change(function(){
var type = $(this).val();
if(type == "2"){
$("#products").show();
}else{
$("#products").hide();
}
});
});
</script>
Note:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
add jquery library
you need yo check the selected value of select box.
<select id="ddlSelect">
<option>Jobs</option>
<option>Products</option>
<option>Other</option>
</select>
<input type="text" id="hdnPro" value="product" style='display:none'/>
$('#ddlSelect').on('change',function(){
if($(this).val() == 'Products'){
$('#hdnPro').show();
}else{
$('#hdnPro').hide();
}
});
DEMO
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I am sonal goyal . New in designing . I want to use multiple select also called 'chosen' in my html page. But enable to create code.
I am using:
1- bootstrap 3.0
2- jquery 1.10.3
In future backbone.js
I find this link chosen.but enable to find code.
can you pls help me.
Thanx
<!-- Build your select: -->
<select class="multiselect" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
<!-- Initialize the plugin: -->
<script type="text/javascript">
$(document).ready(function() {
$('.multiselect').multiselect();
});
</script>
Ref: http://davidstutz.github.io/bootstrap-multiselect/
The code is on github if this is what you're asking > https://github.com/alxlit/bootstrap-chosen Make sure and check "example.html"