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 have a DropDownList and Textbox on my page.
The DropDownList bringing data from database dynamically.
I want that when I choose any item from dropdownlist, it should appear inside the textbox immediately.
How to do it???
here is a solution... by using javascript
<select id="select" onchange="return getValue();">
<option value="1">test1</option>
<option value="2">test2</option>
<option value="3">test3</option>
</select>
<input type="text" name="textbox" id="textbox">
<script type="text/javascript">
function getValue()
{
var e = document.getElementById("select");
var str = e.options[e.selectedIndex].value;
document.getElementById("textbox").value = str;
}
</script>
The Jquery way
HTML CODE:
<select id="select" name="ddlb">
<option value="1" selected='selected'>option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
</select>
<input type="text" name="textbox" id="txt">
JQUERY CODE:
$('#select').on('change', function () {
$('#txt').val($('#select option:selected').val());
});
$('#txt').val($('#select option:selected').val());
LIVE DEMO:
http://jsfiddle.net/PfBFS/2/
Happy Coding :)
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 3 years ago.
Improve this question
<label for="FROM">FROM:</label>
<select name="FROM">
<option selected="" value="Default">(Please select a country)</option>
<option value="CH">CHENNAI</option>
<option value="KP">KANCHIPURAM</option>
<option value="VE">VELLORE</option>
<option value="BA">BANGALORE</option>
</select>
<BR></BR>
<label for="TO">TO:</label>
<select name="TO">
<option selected="" value="Default">(Please select a country)</option>
<option value="CH">CHENNAI</option>
<option value="KP">KANCHIPURAM</option>
<option value="VE">VELLORE</option>
<option value="BA">BANGALORE</option>
</select><br></form>
</br>
i'm doing online bus booking project, i set two label for destination purpose ,' "from" area and "To" area ' using option tag, now i should not same area ,i need jsp or php queries
Add IDs to the two selects, so we can identify and find them. Then add an event-listener to your first select, where changes made to it, will hide the selected value and hide all others.
This uses the value of the options, not its text.
$("#from-location").on("change", function() {
$("#to-location").find("option").show();
$("#to-location").find("option[value="+this.value+"]").hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="FROM">FROM:</label>
<select name="FROM" id="from-location">
<option selected="" value="Default">(Please select a country)</option>
<option value="CH">CHENNAI</option>
<option value="KP">KANCHIPURAM</option>
<option value="VE">VELLORE</option>
<option value="BA">BANGALORE</option>
</select>
<BR></BR>
<label for="TO">TO:</label>
<select name="TO" id="to-location">
<option selected="" value="Default">(Please select a country)</option>
<option value="CH">CHENNAI</option>
<option value="KP">KANCHIPURAM</option>
<option value="VE">VELLORE</option>
<option value="BA">BANGALORE</option>
</select><br></form>
</br>
You might want to add some server-side verification to this after submitting the form as well, where you check that
if ($_POST['FROM'] === $_POST['TO']) {
/* Error handling */
}
You can check this from within PHP. This is a simple example; you should adapt it for your own application. It's not suitable for production use.
<?php
if (empty($_REQUEST['FROM'])) {
exit("Please enter an origin.");
}
if (empty($_REQUEST['TO'])) {
exit("Please enter a destination.");
}
if ($_REQUEST['FROM'] == $_REQUEST['TO']) {
exit("Please enter a destination that is different from your origin.");
}
?>
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 4 years ago.
Improve this question
I had created a sample drop down list, below is the code.
<select id="select-id">
<option value="" selected="">Pick a E-commerce</option>
<option value="">Amazon</option>
<option value="">Flipkart</option>
<option value="">Snapdeal</option>
</select>
<button>GO</button>
After selecting the dropdown item and clicking on GO button i want to redirect the page to respective sites like, https://www.amazon.in/ ,https://www.flipkart.com/ and https://www.snapdeal.com/ respectively.
Kindly help me how can i do this
I hope below code helps you,
<select id="select-id">
<option value="" selected="">Pick a E-commerce</option>
<option value="http://www.amazon.com">Amazon</option>
<option value="http://www.flipkart.com">Flipkart</option>
<option value="http://www.snapdeal.com">Snapdeal</option>
</select>
<button onclick="siteRedirect()">GO</button>
<script>
function siteRedirect() {
var selectbox = document.getElementById("select-id");
var selectedValue = selectbox.options[selectbox.selectedIndex].value;
window.location.href = selectedValue;
}
</script>
You can try the following way:
var linkArr = ["https://www.amazon.in/","https://www.flipkart.com/","https://www.snapdeal.com/"];
var selectedPosition = 0;
document.getElementById('select-id').addEventListener('change', function(){
selectedPosition = this.selectedIndex;
});
document.getElementById('go').addEventListener('click', function(){
if(selectedPosition != 0)
window.location.href = linkArr[selectedPosition-1];
});
<select id="select-id">
<option value="" selected="">Pick a E-commerce</option>
<option value="">Amazon</option>
<option value="">Flipkart</option>
<option value="">Snapdeal</option>
</select>
<button type="button" id="go">GO</button>
<select id="selectid">
<option j-link="" value="" selected="">Pick a E-commerce</option>
<option j-link="http://amazon.com" value="">Amazon</option>
<option j-link="http://flipkart.com" value="">Flipkart</option>
<option j-link="http://snapdeal.com" value="">Snapdeal</option>
</select>
<button id="buttonid">GO</button>
<script>
document.getElementById("buttonid").onclick = function () {
var select = document.getElementById("selectid");
var option = select.children[select.selectedIndex];
if (!option || !option.getAttribute("j-link") || !option.getAttribute("j-link").length)
return;
window.location = option.getAttribute("j-link");
};
</script>
// handle click
$("#go").on("click", function(){
//get selected option value
var option = $('#select-id').find('option:selected').attr('value');
console.log(option)
//redirect to that link
var strWindowFeatures = "location=yes,height=570,width=520,scrollbars=yes,status=yes";
var URL = option;
var win = window.open(URL, "_blank", strWindowFeatures);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select-id" name="select-id">
<option value="" selected="">Pick a E-commerce</option>
<option value="https://www.amazon.in/">Amazon</option>
<option value="http://flipkart.com">Flipkart</option>
<option value="http://snapdeal.com">Snapdeal</option>
</select>
<button id="go">Go</button>
if you are ok to use jquery :
<select id="select-id" name="select-id">
<option value="" selected="">Pick a E-commerce</option>
<option value="https://www.amazon.in/">Amazon</option>
<option value="http://flipkart.com">Flipkart</option>
<option value="http://snapdeal.com">Snapdeal</option>
</select>
<script>
$("#select-id").on("change", function(){
location.href = this.value;
})
</script>
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 4 years ago.
Improve this question
I want to load the option value in div>. The below code can be run successfully.
<select onchange="location.assign = this.options[this.selectedIndex].value;">
<option>Please select</option>
<option value="page1.html">page1</option>
<option value="page2.html">page2</option>
<option value="page3.html">page3</option>
</select>
<div id="load_page"></div>
How can I load the page inside div
thanks.
With jQuery you can use $.load():
$(function() {
var page = $('#load_page');
$('#pages').on('change', function(e) {
var option = $(this).find('option:selected');
if (0 === option.index()) {
page.text('Oops');
} else {
page.text('Loading ' + option.val());
page.load(option.val());
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="pages">
<option>Please select</option>
<option value="page1.html">page1</option>
<option value="page2.html">page2</option>
<option value="page3.html">page3</option>
</select>
<div id="load_page"></div>
With just iframe and js:
document.getElementById('pages').onchange = function(e) {
document.getElementById('load_page').src = this.options[this.selectedIndex].value;
};
<select id="pages">
<option value="">Please select</option>
<option value="page1.html">page1</option>
<option value="page2.html">page2</option>
<option value="page3.html">page3</option>
</select>
<iframe id="load_page"></iframe>
You can use load() method of jquery. The load() method loads data from a server and puts the returned data into the selected element.
$(document).ready( function() {
$("select").on("change", function() {
if($("select option:selected").index() > 0) {
console.log("cannot load");
} else {
$("#load_page").load($('option').val());
}
});
});
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 years ago.
Improve this question
I would like to display the value of all my select fields in a list (li).
Here is my HTML code.
<select name="is_format" id="is_format">
<option value="A4">{l s='A4'}</option>
<option value="A3">{l s='A3'}</option>
</select>
<select name="is_color" id="is_color">
<option value="Couleur" selected>{l s='Couleur'}</option>
<option value="Noir/Blanc">{l s='Noir et Blanc'}</option>
</select>
Thank you
Try it like,
var ul = $('<ul>').appendTo('body');
function createList() {
ul.empty();
$('select option:selected').each(function() {
li = $('<li/>').text($(this).text()).attr('value', this.value);
li.appendTo(ul);
});
}
$('select').on('change', function() {
createList()
}).trigger('change');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select name="is_format" id="is_format">
<option value="A4">{l s='A4'}</option>
<option value="A3">{l s='A3'}</option>
</select>
<select name="is_color" id="is_color">
<option value="Couleur" selected>{l s='Couleur'}</option>
<option value="Noir/Blanc">{l s='Noir et Blanc'}</option>
</select>
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 years ago.
Improve this question
I am trying to replace entire dropdown - select element, with an input field, if a selected option value is, say, 777.
$(document).ready(function(){
$("#mylist").change(function(){
//var val = $(":selected",this).val();
if(this.val == "777"){
$("#mylist").replaceWith('<input type="text" name="my_name" placeholder="xxx" required="required" />');
}
}) // change-function ends
}) // doc-ready ends
<select id="mylist">
<option value="777">Nothing exists</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
But it's not working. Where I am going wrong?
.val is not a valid property in javascript, it is jquery method.
You should either use clean javascript this.value or jquery $(this).val() instead of this.val here:
$(document).ready(function(){
$("#mylist").change(function(){
if($(this).val() == "777"){
$("#mylist").replaceWith('<input type="text" name="my_name" placeholder="xxx" required="required" />');
}
}) ;// change-function ends
}); // doc-ready ends
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<select id="mylist">
<option value="777">Nothing exists</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
try this
<script type="text/javascript">
$(document).ready(function(){
$("#mylist").change(function(){
var val = $("option:selected",this).val();
if(val == "777"){
$("#mylist").replaceWith('<input type="text" name="my_name" placeholder="xxx" required="required" />');
}
});
});
</script>
You are using val which is not a property or function you need to use .value Try this
if(this.value == "777"){
$("#mylist").replaceWith('<input type="text" name="my_name" placeholder="xxx" required="required" />');
}