Develop Reference

Select not changing value after jQuery load event

Within my below example, I've a little select and a button. When I change the select value to e.g., 5 and press the button to reload the HTML select, I am wondering now why the displayed value inside the select is not reset after the jQuery load event, even if I set selected="selected" inside my HTML code?
(function($) {
$(document).ready(function() {
$('button').click(function() {
let select = $('#select');
console.log(`Value before: ${select.val()}`);
$('#wrapper').load(window.location.href + " #wrapper", function() {
let select = $('#select');
console.log(`Value after: ${select.val()}`);
});
});
});
})(jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper">
<select id="select" name="quantity">
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<button>Load</button>

How can I open a select options on mouse hover [duplicate]

This question already has answers here:
Trigger click on select box on hover
(6 answers)
Closed 2 years ago.
I have a select option that is working nicely on click.
Now, I want that select option will be open when mouse is on hover on that select option.
my html is:
<select name="select" id="inputselect" class="form-control">
<?php
$i=1;
for($i=1; $i<=10; $i++){ ?>
<option value="<?=$i?>">option_<?=$i?></option>
<?php }
?>
</select>
// script will be like this
$('#inputselect').mouseover(function(event){
// code for open the select option on mouse hober
});
Thanks in advance

See the below snippet.Let me know in comments if you have any qns.
$('select').hover(function() {
$(this).attr('size', $('option').length);
}, function() {
$(this).attr('size', 1);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
<option>first</option>
<option>second</option>
<option>third</option>
</select>

You can check the same at Trigger click on select box on hover . You need Chosen for this.
HTML:
<select id="dropdown" data-placeholder="Mouseover">
<option value="one">Option 1</option>
<option value="two">Option 2</option>
<option value="three">Option 3</option>
</select>
JS:
$("#dropdown").chosen().next(".chosen_container").hover(
function(){
$("#dropdown").trigger("liszt:open");
},
function(){
$(this).trigger("click");
}
);

Try This -
$('#inputselect').mouseover(function(event){
$('#inputselect').show();
$('#inputselect')[0].size= $('#inputselect option').length;
});
$('#inputselect').mouseout(function(event){
$('#inputselect').show();
$('#inputselect')[0].size=1;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
<select name="select" id="inputselect" class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>

Javascript Post-Render Selection by Value not updating dropdown

I have a drop down list of options which lets my users choose one of a few options. But I want to also include a button that when pressed will select a specific option out of the dropdown list.
This is working but the issue is that the dropdown list isnt showing the updated selection, but if you click on the dropdown list you can see that the selection the button chose is highlighted and is indeed selected.
function onclick() {
document.form.server_select.value = 'Quebec';
}
<select name="server_select" id="server_select">
<option value="random" selected>Auto Select</option>
<option value="Quebec">Quebec</option>
<option value="NewYork">NewYork</option>
<option value="Seattle">Seattle</option>
<option value="France">France</option>
</select>
<button onclick="onclick()">Button</button>
When you load the page the first option is displayed in the drop down to the user as seen
and
After pressing the button the dropdown still shows the first option in the list but when clicking onto the dropdown you can see a different option is selected.
I expected the dropdown to also show the new selection.

The code works as expected:
function change() {
document.getElementById('server_select').value = 'Quebec';
}
<form>
<select name="server_select" id="server_select">
<option value="random" selected>Auto Select</option>
<option value="Quebec">Quebec</option>
<option value="NewYork">NewYork</option>
<option value="Seattle">Seattle</option>
<option value="France">France</option>
</select>
</form>
<button onclick="change()">Button</button>
But looking at the screenshots, it looks like they are doing a custom dropdown, basically you are clicking on a transparent select, and they are updating their pretty dropdown manually, something like this:
function change() {
document.getElementById('server_select').value = 'Quebec';
}
function change2() {
element = document.getElementById('server_select')
element.value = 'Quebec';
var event;
event = document.createEvent('MouseEvents');
event.initMouseEvent('change', true, true, window);
element.dispatchEvent(event);
}
function open() {
document.getElementById('server_select').value = 'Quebec';
}
document.getElementById('server_select').addEventListener('change', function(event) {
document.getElementById('value').innerHTML = event.target.value
})
#dropdown {
position: relative;
}
#server_select {
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<form>
<div id="dropdown">
<span id="value">Auto Select</span>
<select name="server_select" id="server_select">
<option value="random" selected>Auto Select</option>
<option value="Quebec">Quebec</option>
<option value="NewYork">NewYork</option>
<option value="Seattle">Seattle</option>
<option value="France">France</option>
</select>
</div>
</form>
<button onclick="change()">Button</button>
<button onclick="change2()">Button Fixed</button>
You'll have to look at the actual HTML structure of your document to see what you need to update, but use the Button Fixed example to see (basically) what you need to do.

You should avoid using reserved words such as onclick as function name
for list of reserved words please look into https://www.w3schools.com/js/js_reserved.asp
function change() {
document.getElementById("server_select").value = "Quebec";
}
<select name="server_select" id="server_select">
<option value="random" selected>Auto Select</option>
<option value="Quebec">Quebec</option>
<option value="NewYork">NewYork</option>
<option value="Seattle">Seattle</option>
<option value="France">France</option>
</select>
<button onClick="change()">Button</button>
<script>
</script>

Fire change() event even when selection hasn't changed [duplicate]

This question already has answers here:
Run change event for select even when same option is reselected
(6 answers)
Closed 5 years ago.
I want to override the general behavior of an HTML select element by making it fire the change event even when the selected option hasn't changed.
$('select').change(function() {
alert($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
How can i achieve this?

You can try like this:-
HTML :
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
JS :
$("select").mouseup(function() {
var flag = $(this).data("flag");
var cur_val = $(this).val();
if(flag) {
alert(cur_val);
}
$(this).data("flag", !flag);
});
Here is working jsfiddle.
Give it a try, this should work.

How to add element in javascript with value option selected [duplicate]

This question already has answers here:
Get selected value in dropdown list using JavaScript
(32 answers)
Closed 6 years ago.
I want to add element <p> with value option selected.
<select id='select'>
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected="selected">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<p>text</p>
<p>text</p>
<p>text</p>
if I select 4, element <p> will appear 4 <p> element.
how to make it using nativ javascript? not jquery

If you are looking for plain JS implementation, here is what you could do.
document.addEventListener("DOMContentLoaded", function() {
let selectEle = document.querySelector("#select");
function setVal() {
let val = selectEle.options[selectEle.selectedIndex].value;
document.querySelector("p").innerText = val;
}
selectEle.addEventListener("change", function(event) {
setVal();
});
setVal();
});
<select id='select'>
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected="selected">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<p>text</p>

With pure javascript you can do it like this create an external function and call it on change.
<script>
var create_p= function()
{
var number =document.getElementById('select').value;
document.getElementById("add").innerHTML='<p>'+number+'</p>';
}
</script>
<select id='select' onchange="create_p()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected="selected">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<div id="add">
</div>

First I advise you give a class or id to the <p> you want to put the text in. But the following should get you started.
$('#select').on('change', function() {
$('p').text($('#select').val());
});