I got a problem.
I've tried to do a selectbox using boostrap form helpers.(http://js.nicdn.de/bootstrap/formhelpers/docs/state.html)
So I got a selectbox for "country" and an other for "state"
<select id="countries" class="form-control bfh-countries"></select>
<select id="states" class="form-control bfh-states" data-country="countries"></select>
If I choose a value form the country box the states appears in the states box, so everything ok.
But if I use a script
<button onclick="test()" class="btn">Load Country</button>
function test(){
document.getElementById('countries').value = "AU";
}
Nothing appends on the "states" selectbox, I should get the states of the country selected by the function test() right ?
What can I do to fix this ?
http://jsfiddle.net/xf8ech7k/1/
Thanks in advance
The problem there is that you aren't triggerent the "change" event.
Take a look at you modified code
function test(){
var select = document.getElementById('countries')
, event = document.createEvent("UIEvents");
select.value = "AU";
event.initUIEvent("change", true, true);
select.dispatchEvent(event);
}
Then, take a look at this post
As #CBroe says, you can do it in a simpler way by doing:
$("select").val("AU").trigger("change");
Related
I've tried to search for what I'm after, and this is the closest I can get:
Make a Dropdown with Search Box using jQuery (by Yogesh Singh)
https://makitweb.com/make-a-dropdown-with-search-box-using-jquery/
It can provide a HTML Dropdown with Search capability.
However, what I hope to have is to have input capability as well. I.e., if nothing found, then use the user input as the result.
I tried to look at the code,
$(document).ready(function(){
// Initialize select2
$("#selUser").select2();
// Read selected option
$('#but_read').click(function(){
var username = $('#selUser option:selected').text();
var userid = $('#selUser').val();
$('#result').html("id : " + userid + ", name : " + username);
});
});
UPDATE: using datalist. Requirement:
if found, use found value as the result.
if nothing found, then use the user input as the result.
Maybe both are the same case, but I don't know js well to say that.
$(document).on('change', '#place', function () {
$("#fax").val($("#place").val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="place" list="places">
<datalist id="places">
<option value="WVC" label="503-882-1212"></option>
<option value="HAM" label="612-883-1414"></option>
<option value="WON" label="317-445-8585"></option>
</datalist>
<br>
<input type="text" id="fax">
I don't see an easy way to do that myself, as I don't know js quite well.
It is possible, to use the user input as the result if nothing found? thx
<datalist> is like a separate select element and linked to the text field previous to it and simply updates the value of textfield based on what is selected. If you like to run your code based on change event on the text field, you need to read the datalist first and then pick the label from it. If there is no value, then pick the text from the textfield.
$(document).ready(function () {
$(document).on('change', '#place', function () {
let myString =
$(this).next().find("option[value='" + $(this).val() + "']").prop("label");
myString = myString ? myString : $(this).val();
$("#fax").val(myString);
$(this).val(myString); //IF YOU LIKE TO SHOW SAME STRING IN TEXT FIELD TOO
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="place" list="places">
<datalist id="places">
<option value="WVC" label="503-882-1212"></option>
<option value="HAM" label="612-883-1414"></option>
<option value="WON" label="317-445-8585"></option>
</datalist>
<br>
<input type="text" id="fax">
I am dynamically adding a select tag ,and appending option from the data comming from server and on change of the dropdown i have to put the selected data in textbox,
But if there is only one option onchange event will not work what should i do please help
My problem will be more clear by below example
var dynamicHtmlDisplay = "<input type=\"button\" Value=\"" + strAf_Manual + "\" class=\"btnAddManual\" /> </br>"
dynamicHtmlDisplay += "<select class=\"Test form-control\"><option>--</option></select>"
And after a server call i am fillin the dropdown
$('.Test').empty();
$.each(Result, function (i, p) {
$('.Test').append($('<option></option>').val(JSON.stringify(p)).html(p.Text));
});
And on change event i am entering the selected text in an textbox
$(".Test").change(function () {
var selectedObject = JSON.parse($('option:selected', this).val())
});
But if only one value is there in dropdown my change does not work is there anything else instead of onchange event ,Something like onselect event.
As you can read from the documentation for https://api.jquery.com/change/
It only works when you change the value of the dropdown, is there is only one value you didn't "change" it.
A solution is to add a blank value which is deleted after your first change call
<option value="0"></option>
<option value="1">First option</option>
$("#select1").change(function(){
// You delete the blank value for the first call
$("#select1 option[value=0]").remove();
...
Normally Dropdown change event will not fire if you select the same dropdown option.So it will not work for a single value.
Parshuram,
I assume that you are going to load select control using code behind and the below code would still work if you maintain classes and on function.
I hope this will help you. All you need is on function. Enjoy!
$(function(){
var Result = [{id:'1', value:'One'},{id:'2',value:'Two'}];
$('.Test').empty();
$.each(Result, function (i, p) {
$('.Test').append($('<option></option>').val(p.id).html(p.value));
});
$('.form-wrapper').on('change','.Test',function(){
console.log('You have selected: ' + $(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-wrapper">
<input type="button" Value="Add Option" class="btnAddManual" /> </br>
<select class="Test form-control"><option>--</option></select>
</div>
I have a select option to add accessories to a product. What I want to do is recalculate the price without have to refresh the page. This is what I'v got so far:
<form action="" method="post">
<select name="option" onchange="this.form.submit()">
<option value="15">Acc1</option>
<option value"30">Acc2</option>
<option value"45">Acc3</option>
</select>
</form>
$oldprice ='678';
$option = $_POST['option'];
$newPrice= $oldprice + $option;
This works great, however it has to refresh the page. Is there a way to recalculate the new price without having to refresh the page.
And also use the option value in other places on the page for example
If ($_POST['option] == '15'){ \do something}
Any help welcome
You could use ajax or if the needed information is already in the page which it seems to be based on your example code, then you could change the onchange to be a function:
onchange='updatePrice()'
Sample function code:
function updatePrice(){
var e = document.getElementsByName("option")[0];
var accessory_value = e.options[e.selectedIndex].value;
//additional code to update the price where
}
Hook onchange event in select tag.
Ex:
<select onChange="calculate(e)">
// option here
</select>
*.js:
function calculate(e) {
console.log(e.target.value);
}
I created two combo boxes. when i choose any value from first combo box respectively the values from second combo box should be changed.
i am using String xyz=request.getParameter("combo1") ;
where combo1 is the name or id of the combo box.
thanks in advance
Please frame your question in a way others can understand. And put the code also what you have tried.
Anyways seems like you want to set some value from change event of others, with the simple js function we can do please see the code
<script>
function doChange()
{
var val = document.getElementById("mydropdown").value;
var e = document.getElementById("mydropdown2");
e.innerHTML="";
e.options[e.options.length] = new Option(val, val);
}
</script>
<form>
<select name="mydropdown" id="mydropdown" onchange="doChange()">
<option value="Sample1">Sample1</option>
<option value="Sample2">Sample2</option>
<option value="Sample3">Sample3</option>
</select>
<br/>
<select name="mydropdown2" id="mydropdown2" >
</select>
Trying something that sounds simple but not working:
Allow a user to select an option from a dropdownlist and then have this displayed as an alert each time the user changes it. Here's what I've got so far:
<select name="pickSort" id="chooseSort" onchange="changedOption">
<option value="lowHigh" id="lowHigh">Price Low-High</option>
<option value="highLow" id="lowHigh">Price High-Low</option>
</select>
<script>
function changedOption() {
var sel = document.getElementsByName('pickSort');
var sv = sel.value;
alert(sv);
}
</script>
A better way of doing this without the inline stuff:
document.getElementById("chooseSort").onchange = function() {
alert(this.value);
};
jsFiddle here.
You need to call the function with parentheses changedOption()
<select name="pickSort" id="chooseSort" onchange="changedOption()">