Im trying to reset a select field like this
$('#name').change(function(){
$('#name2').val( $('#name2').prop('defaultSelected') );
});
But this dosen't work on select2..
Here is a jsfiddle how I want it to look like and work like it!
And this should be the new one.. http://jsfiddle.net/js3vV/
Add defaultSelected attribute in second dropdown to set default selected value of dropdown , it will allow to return $('#name2').prop('defaultSelected') default value of dropdown,which will reset second dropdown on change in first dropdown.
<select id="name2" defaultSelected="">
<option value="">select all</option>
<option value="1">Text 1</option>
<option value="2">Text 2</option>
<option value="3">Text 3</option>
</select>
$('#name').change(function(){
$('#name2').val( $('#name2').prop('defaultSelected') );
});
$('#name2').change(function(){
$('#name').val( $('#name').prop('defaultSelected') );
});
add one function for that, I tested that, I think it worked.
here ur fiddle,
`
Related
I have a drop-down box in HTML showing three options. I am also using javaScript and want to use the getElementById tool to connect the two. However, I only have one ID for the drop-down box. How does javascript recognize that I have three different options?
There's actually a demo on w3schools.com showing exactly what you're asking. To get the number of options, you could do something like
document.getElementById("mySelect").options.length
Here is an example of how to retrieve the value of a dropdown: https://jsfiddle.net/ykcwgnm8/
You use getElementBy* functions to get the element, however value attribute denotes which item is currently selected.
HTML:
<select id="dropdown">
<option value="1">First option</option>
<option value="2">Second option</option>
<option value="3">Third option</option>
</select>
JS:
function onChangeHandler(e)
{
alert("you have selected item with value "+this.value);
}
document.getElementById("dropdown").addEventListener("change", onChangeHandler);
You can listen for change like this
var list = document.getElementById("mySelect")
list.addEventListener('change', function(e){
console.log(e.target.selectedIndex)
console.log(e.target.options[e.target.selectedIndex].text)
})
<select id="mySelect">
<option>Apple</option>
<option>Orange</option>
<option>Pineapple</option>
<option>Banana</option>
</select>
You can do something like this, here is an example:-
html
<select id="selectBox">
<option value="1">option 1</option>
<option value="2" selected="selected">option 2</option>
<option value="3">option 3</option>
</select>
js
var e = document.getElementById("selectBox");
var selectedValue = e.options[e.selectedIndex].value;
// this will give selectedValue as 2
Hope you find this useful!!
So, as the title says I want to change the value of a certain option using JS. I have already looked for it but every answer refers to changing the selected option not the value of a specifical option.
<select class="form-control">
<option value="0" selected>Ver</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="50">50</option>
</select>
I want to change "Ver" option value from 0 to 1. I don´t know if it is possible but thanks in advance.
Have you tried assigning it an id and then changing it in your js file?
Something like this:
<option value='0' id='opt1' selected>Ver</option>
and in javascript:
document.getElementById("opt1").value = "1";
You can select the option with value 0 using
let opt = document.querySelector('select.form-control option[value="0"]')
You can then change the value by reassigning it
opt.setAttribute('value', '1')
If you have more than one select with class form-control this could be a problem, and you might want to give it/them a unique id — then the selector would be
let opt = document.querySelector('select#your-id option[value="0"]')
Here is a stack snippet doing this, where I've combined the select and the assignment into a single statement. I've also added a change event listener to show the value in the console, so if you switch to 20 then switch to Ver again it would print 20 and then 1 to the console, showing you that the value is indeed 1, not 0
document.querySelector('select.form-control')
.addEventListener('change', function(e) {
console.log(this.value);
});
document.querySelector('select.form-control option[value="0"]')
.setAttribute('value', '1');
select {
min-width: 10em;
}
<select class="form-control">
<option value="0" selected>Ver</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="50">50</option>
</select>
Hello you can assign the value with the following instruction
$("#SelectID").val("value option");
document.getElementById("SelectID").value = "value option";
reference in this url Set value of combobox or select
I need the default value of dropdown list for business logic if user doesn't select any value from dropdown list then i have to use default value of dropdown
You can get it by doing document.getElementById('idoftheselect').value
function getDefaultVal() {
console.log(document.getElementById('sel').value)
}
<select id='sel'>
<option val='1'>1</option>
<option val='2'>2</option>
<option val='3'>3</option>
<option val='4'>4</option>
<option val='5'>5</option>
</select>
<button type='button' onclick='getDefaultVal()'>Get Value</button>
add one more option with selected attribut
<select id="someId">
<option value="0" selected>Default</option>
</select>
using this
$('#selector option:selected').val();
In that case add one more option in dropdown like
<option value="-1">-select-</option>
then using jquery
$('select option:selected').val();
will always give the current dropdown selected value.
I'm creating a form. I have two fields, 1. default value field and 2. preview field. Both are multiselect fields. The user will add the options to the multiselect manually. Whenever the user chooses an option in the default value, the same value should be shown as selected in the preview field. When the user removes one option, the same option should be unselected. This is how I've written the onchange event for this multiselect:
$("#MultiSelect_DefaultValues").change(function() {
alert($(this).val());
$("#MultiSelect_Preview").val($(this).val());
});
I get the correct value in the alert. But, in the preview field, there is no reaction. All the options available in the default value field are available in the preview field too. But, the options selected in the default value field is not selected in the preview field. What's wrong with this? What should I change, so that the changes in the default field reflects in the preview field too?
You said you are using select2 so execute like this:
$("#MultiSelect_DefaultValues").change(function () {
alert($(this).val());
var prevSelect = $("#MultiSelect_Preview").select2();
prevSelect.val($(this).val()).trigger('change');
});
The values on the option tags need to match for this, if I'm understanding correctly what you're trying to achieve that is.
e.g.
$("#MultiSelect_DefaultValues").change(function() {
console.log($(this).val());
$("#MultiSelect_Preview").val($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="MultiSelect_DefaultValues" multiple>
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>
<select id="MultiSelect_Preview" multiple>
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>
You can provide multiple replacements by sending an int array to the select method.
$('#cars').val([1,3]);
//or $('#cars').selectpicker('val', [1,2,3]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="cars" id="cars" multiple>
<option value="1">Volvo</option>
<option value="2">Saab</option>
<option value="3">Opel</option>
<option value="4">Audi</option>
</select>
you can use this code
<script>
$("#MultiSelect_DefaultValues").change(function () {
$('select[id="MultiSelect_Preview"]').find('option[value=' + $(this).val() + ']').attr("selected", true);
});
</script>
sorry for my bad english, i have a problem with select :
<form name="reg" style="width:700px;" action="#" method="post">
<p align="center">
<select onChange="reg(this.options[this.selectedIndex].value)" size="1">
<option selected value="250">Select the Reg</option>
<option value="0">Reg 1</option>
<option value="1">Reg 2</option>
<option value="2">Reg 3</option>
<option value="3">Reg 4</option>
<option value="4">Reg 5</option>
<option value="5">Reg 6</option>
<option value="6">Reg 7</option>
<option value="7">Reg 8</option>
<option value="8">Reg 9</option>
<option value="9">Reg 10</option>
</select>
</p>
</form>
I would like that when i click on select, the size of select changes in size="5", because when the document load the size is size="1" (and this is good) but if i click on select, it shows all ten options, and this is the problem...
While, if i click on select, the size changes, is most beautiful.
EDIT
In future the form could have more 250 options, so is important that when the document load size is 1, and when i click the size is 5 ....
the size must be "5" only when the select show options, and when an option is selected the size must be 1.
The problem is that i don't know how made it, maybe with jquery? or only with css?
Can you help me?
Thanks!
Here is a working solution for your problem:
add focus event handler to the select list with id='selRegs'
set the size attribute to 6 (5 will show 4 options + the "Select the Reg" option)
after option is changed the size will be reset to 1
remove focus from select
https://jsfiddle.net/juaxo8zm/8/
$(document).ready(function () {
var initPos = $("#yourDiv").position();
console.log("init: ");
console.log(initPos);
$('#selRegs').focus(function () {
$('#selRegs').attr("size", "6");
$("#yourDiv").css({
position: "absolute",
top: initPos.top,
left: initPos.left
});
});
$('#selRegs').change(function () {
console.log("selected");
$('#selRegs').attr("size", "1");
$("#selRegs").blur();
$("#yourDiv").css({
position: "static"
});
});
});
I use jQuery for this:
.change()
.focus()
.attr(param1, param2)
.blur()
.position()
Try this:
<select size="1"
onfocus='this.size=5;'
onblur='this.size=1;'
onchange='this.size=1; this.blur();'
>
Use the HTML onclick="myFunction()" event tag from the HTML select tag, or use jQuery click() handler if you want to declare the event handler at the javascript level (I mean if you want add the additional event from javascript).
I mean you have a choice - add the extra event dispatch code in the HTML tag source code or add it from the javascript/jQuery level.
The problem is that onChange() event dispatch doesn't get called until too late for your need (it gets called after a user selects a value).
You need to get notified the moment the button for the drop-down menu is clicked so you can change the selected value (default) value.
In your click function handler change the selectedIndex property and set it to the the index of the line that contains "5"
You should use click event on select
$('select').on('click',function(){
$(this).attr('size',5)
});
Just use javascript :
<select id='sel' onfocus='changesize();' onchange='changesize2();' size='1'>
<option selected value="250">Select the Reg</option>
<option value="0">Reg 1</option>
<option value="1">Reg 2</option>
<option value="2">Reg 3</option>
<option value="3">Reg 4</option>
<option value="4">Reg 5</option>
<option value="5">Reg 6</option>
<option value="6">Reg 7</option>
<option value="7">Reg 8</option>
<option value="8">Reg 9</option>
<option value="9">Reg 10</option>
</select>
<script>
function changesize(){
document.getElementById('sel').size = '5';
}
function changesize2(){
document.getElementById('sel').size = '1';
document.getElementById('sel').blur();
}
</script>
Demo : http://codepen.io/anon/pen/zxbRZb