<select id="test_me" name="test_me" disabled>
<option value="">Please select</option>
<option value="1">Test One</option>
<option value="2" selected>Test Two</option>
<option value="3">Test Three</option>
</select>
<input type="hidden" value="" name="test_hidden" id="test_hidden">
Here option Test Two is selected and disabled. The below code fetches select value when dropdown is enabled and value is changed.
//pass value to hidden input
$('#test_me').change(function () {
var id = $(this).val();
$('input#test_hidden').val(id);
})
How can I pass selected option value i.e. 2 to my hidden input, when dropdown is disabled and value is selected ?
This issue is reported at http://bugs.jquery.com/ticket/13097 and marked as wont fix. for reason:
The long-standing logic in .val() ensures that we don't return disabled options in a select-multiple. The change just applies the same behavior for select-one now for consistency.
Alternative for this would be to use selectedindex property of select to target option by index:
$("#test_me option").eq($("#test_me").prop("selectedIndex")).val();
Complete Snippet:
var id = $("#test_me option").eq($("#test_me").prop("selectedIndex")).val();;
$('input#test_hidden').val(id);
<script type="text/javascript">
//pass value to hidden input
$(document).ready(function(e) {
var sel = $("#test_me").val();
$("#test_hidden").val(sel);
});
</script>
<select id="test_me" name="test_me" disabled>
<option value="">Please select</option>
<option value="1">Test One</option>
<option value="2" selected>Test Two</option>
<option value="3">Test Three</option>
</select>
<input type="hidden" value="" name="test_hidden" id="test_hidden">
Related
I have problem in removing the attribute selected in the option
my select is inside the modal when my page load option build dynamically like this
<select class="form-control" id="petselect" name="petselect">
<?php
foreach ($pest as $pet){
echo "<option value='".$pet->id."'>$pet->name</option>";
}
?>
</select>
when I edit the form the modal will show and I selected the default pet->id
<select class="form-control" id="petselect" name="petselect">
<option value="1">pet1</option>
<option value="2" selected="selected">pet2</option>
<option value="3">pet3</option>
<option value="4">pet4</option>
<option value="5">pet5</option>
<option value="6">pet6</option>
<option value="7">pet7</option>
<option value="8">pet8</option>
<option value="9">pet9</option>
</select>
Now when I change it to pet5 and submit the form via ajax, and my modal will hide,
when I edit again the option selected pet5 is displayed but when I view source
this is how it looks like, 2 selected attribute.
<select class="form-control" id="petselect" name="petselect">
<option value="1">pet1</option>
<option value="2" selected="selected">pet2</option>
<option value="3">pet3</option>
<option value="4">pet4</option>
<option value="5" selected="selected">pet5</option>
<option value="6">pet6</option>
<option value="7">pet7</option>
<option value="8">pet8</option>
<option value="9">pet9</option>
</select>
this is my js to add selected attribute,when I edit the form
$('#petselect option')
.filter(function() { return $(this).val() === petID; })
.attr('selected',true);
and code for my modal when it hides.
$('#petselectmodal').on('hidden.bs.modal', function () {
$('#petselect option:selected')
.removeAttr('selected');
});
This should not be done on the <option> but on the <select> level. The Options are basically a visual indicators. The element that has the Name and thus the Value is the Select element. Use $('#petselect").val(5); and then the form will read this value instead. Plus HTML will update the Option too.
$(function() {
$("button").click(function() {
$("#petselect").val(5);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" id="petselect" name="petselect">
<option value="1">pet1</option>
<option value="2" selected="selected">pet2</option>
<option value="3">pet3</option>
<option value="4">pet4</option>
<option value="5">pet5</option>
<option value="6">pet6</option>
<option value="7">pet7</option>
<option value="8">pet8</option>
<option value="9">pet9</option>
</select>
<button>Change</button>
You can do it manually if you so choose.
$(function() {
$("button").click(function() {
$("#petselect").val("");
$("#petselect option").prop("selected", false);
$("#petselect").val(5);
$("#petselect option[value='" + 5 + "']").prop("selected", true);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" id="petselect" name="petselect">
<option value="1">pet1</option>
<option value="2" selected="selected">pet2</option>
<option value="3">pet3</option>
<option value="4">pet4</option>
<option value="5">pet5</option>
<option value="6">pet6</option>
<option value="7">pet7</option>
<option value="8">pet8</option>
<option value="9">pet9</option>
</select>
<button>Change</button>
How can I get input values to change dynamically when I select some element from select tag. I want in this input box to be shown a proper value when I change select option.
<select onchange="changevalue()" id="selectingg">
<option value="0">...</option>
<option value="1">Comedy</option>
<option value="2">Horror</option>
<option value="3">Action</option>
<option value="4">Sci-fi</option>
<option value="5">Adventure</option>
<option value="6">Documentary</option>
<option value="7">Anime</option>
</select>
<input type = "text" id="inputting"></input>
You could use addEventListener on change event and get the value from the event.target dropdown like so:
document.getElementById("dropdownCategory").addEventListener('change', event => document.getElementById('categorySelected').value = event.target.value);
<select id="dropdownCategory">
<option value="0">...</option>
<option value="1">Comedy</option>
<option value="2">Horror</option>
<option value="3">Action</option>
</select>
<input type="text" id="categorySelected"></input>
The below code is working fine for me you may try this code.
In below code I am assigning select value to input tag value.
function changevalue(){
document.getElementById("inputting").value =
document.getElementById("selecting").value;
}
<select onchange="changevalue()" id="selecting">
<option value="0">...</option>
<option value="1">Comedy</option>
<option value="2">Horror</option>
<option value="3">Action</option>
<option value="4">Sci-fi</option>
<option value="5">Adventure</option>
<option value="6">Documentary</option>
<option value="7">Anime</option>
</select>
<input type = "text" id="inputting"></input>
Here is a dropdown menu of a website
<select name="ctl00$ddlWersjeJezykowe" onchange="javascript:setTimeout('__doPostBack(\'ctl00$ddlWersjeJezykowe\',\'\')', 0)" id="ddlWersjeJezykowe" style="width:100px;margin-right: 10px;">
<option selected="selected" value="1">Polska</option>
<option value="2">English</option>
<option value="17">Русская</option>
<option value="19">Українська</option>
<option value="20">Deutsch</option>
<option value="21">Français</option>
<option value="22">Español</option>
<option value="24">Português</option>
<option value="25">Türk</option>
</select>
I want to change the language to English through browser console. I tried this on my console
document.getElementById("ddlWersjeJezykowe").value="2";
It only selects English but doesn't change the language. How can i change the language to English through my browser console?
Changing the value programmatically doesn't fire the onchange event, so you have to call setTimeout('__doPostBack(\'ctl00$ddlWersjeJezykowe\',\'\')', 0) too.
Alternatively, you can call document.getElementById("ddlWersjeJezykowe").onchange()
This is will get the selected value from select dropdown
<select id="language" style="width:100px;margin-right: 10px;">
<option selected="selected" value="1">Polska</option>
<option value="2">English</option>
<option value="17">Русская</option>
<option value="19">Українська</option>
<option value="20">Deutsch</option>
<option value="21">Français</option>
<option value="22">Español</option>
<option value="24">Português</option>
<option value="25">Türk</option>
</select>
function GetValue() {
var e = document.getElementById("language");
var result = e.options[e.selectedIndex].value;
document.getElementById("result").innerHTML = result;
}
<button type="button" onclick="GetValue()">Get Selected Value</button>
<div id="result"></div>
I have a html dropdown field where there should be a text field added at the bottom naming other.The text typed in this field should come as other:text
drop down html is :
<select name="drop">
<option selected="selected">Please select ...</option>
<option value="car">car</option>
<option value="bike">bike</option>
<option value="Other">Other</option>
</select>
Here other should be text field.For understanding i kept other as option,but i want that to be a input text field where value is given by user.
Thanks in advance
You could add hidden input field by default for other text :
<input type='text' id='other' name='other' style="display:none"/>
And capture the change on select in your js then check if selected option value equal Other and show the field or hide it :
$('select').on('change', function(){
if($(this).val()=='Other'){
$('#other').show().focus();
}else{
$('#other').val('').hide();
}
})
Hope this helps.
$('select').on('change', function(){
if($(this).val()=='Other'){
$('#other').show().focus();
}else{
$('#other').val('').hide();
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="drop">
<option selected="selected">Please select ...</option>
<option value="car">car</option>
<option value="bike">bike</option>
<option value="Other">Other</option>
</select>
<input type='text' id='other' name='other' style="display:none" value='other:'/>
<script type="text/javascript">
function showfield(name){
if(name=='Other')document.getElementById('div1').innerHTML='Other: <input type="text" name="other" />';
else document.getElementById('div1').innerHTML='';
}
</script>
<select name="drop" id="drop" onchange="showfield(this.options[this.selectedIndex].value)">
<option selected="selected">Please select ...</option>
<option value="car">car</option>
<option value="bike">bike</option>
<option value="Other">Other</option>
</select>
<div id="div1"></div>
you could go the other way and make all options accessible by the text field - but giving an autocomplete option as the user types. This can be done with jQuery autocomplete plugins etc or the new html5 datalist. This ties a predetermined set of options to the textfield - allowing the user to select from it if theinput value matches the value, but also allows for alternative text to be entered if there are no matches. Just note though that Safari (and possible other browsers) do not support this feature yet. But its very cool when it is supported.
<input id="transportOptions" list="transport">
<datalist id="transport">
<option value="Car">
<option value="Bike">
<option value="Scooter">
<option value="Taxi">
<option value="Bus">
</datalist>
I have some code that has one contact select box hard coded and then if you click on a add button it adds more contacts. Each contact can be selected from a dropdown and give a location in at location text box.
I want on submit to be able to know if they have selected someone and if not I want to clear out the Location box as there cannot be a location if there is no contact.
<!--- The myContactCount variable is set in another part of javascript this is the current count plus one of the number of current select boxes. --->
<script type="text/javascript" language="javascript">
var e='';
var contactSelectedValue='';
for(var i=1;1<myContactCount;i++){
e = document.getElementById('myContactID_'+i);
contactSelectedValue = e.options[e.selectedIndex].value;
/* I am trying to alert the value so I can then use a if statement to check for null or even change the 'Select a Contact' value to 0 and test for that. */
alert(contactSelectedValue);
}
</script>
<!--- the ID will be 1-100 depending on how many contacts they have added --->
<select name="myContactID_#ID#">
<option value="">Select a Contact</option>
<option value="1">Abe</option>
<option value="2">Barbara</option>
<option value="3">Cavlin</option>
</select>
So after they are created dynamically they code would look like this.
<select name="myContactID_1">
<option value="">Select a Contact</option>
<option value="1">Abe</option>
<option value="2">Barbara</option>
<option value="3" selected="selected">Cavlin</option>
</select>
<select name="myContactID_2">
<option value="">Select a Contact</option>
<option value="1">Abe</option>
<option value="2" selected="selected">Barbara</option>
<option value="3">Cavlin</option>
</select>
<select name="myContactID_3">
<option value="">Select a Contact</option>
<option value="1" selected="selected">Abe</option>
<option value="2">Barbara</option>
<option value="3">Cavlin</option>
</select>
Your script has couple of issues:-
1<myContactCount instead of i<=myContactCount and you are using name in the select and
trying to fetch it by id.
Demo
Html
<select id="myContactID_1">
<option value="">Select a Contact</option>
<option value="1">Abe</option>
<option value="2">Barbara</option>
<option value="3" selected="selected">Cavlin</option>
</select>
<select id="myContactID_2">
<option value="">Select a Contact</option>
<option value="1">Abe</option>
<option value="2" selected="selected">Barbara</option>
<option value="3">Cavlin</option>
</select>
<select id="myContactID_3">
<option value="">Select a Contact</option>
<option value="1" selected="selected">Abe</option>
<option value="2">Barbara</option>
<option value="3">Cavlin</option>
</select>
JS
var e='';
var contactSelectedValue='';
for(var i=1;i<=3;i++){
e = document.getElementById('myContactID_'+i);
contactSelectedValue = e.options[e.selectedIndex].value;
/* I am trying to alert the value so I can then use a if statement to check for null or even change the 'Select a Contact' value to 0 and test for that. */
alert(contactSelectedValue);
}