I am trying to add a value to list by using text box, but it is not working.
<input type="text" value="" id="ip1" class="ip1" />
<input type="button" value="Add" class="bt1" id="bt1" />
<br/>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</select>
And the script is:
$(document).ready(function (e) {
var $txtVal = $('#ip1');
$(".bt1").click(function () {
var opt = $("#ip1").val();
if ($txtVal.val()) {
$('<option />', {
text: $txtVal.val(),
value: $txtVal.val()
}).appendTo('select');
}
});
});
Where is my mistake?
<input type="text" value="" id="ip1" class="ip1" />
<input type="button" value="Add" class="bt1" id="bt1" />
<br/>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</select>
$(document).ready(function () {
$(".bt1").click(function () {
var opt = $("#ip1").val();
if (opt != "" && opt != " "){
opt = "<option value=" + opt + ">" + opt + "</option>";
$("select").append(opt);
}
});
});
p.s jsfidle http://jsfiddle.net/4ve443zv/1/
thanks for every one its working after Successfully adding this
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script language="javascript">
Related
I need to select deselect options in multi-select via JavaScript. The code seems alright but it does not fire the second time you try to select the same item.
So try selecting Full-Time, again click it, that will be deselected. Try clicking it again and it won't work.
$('.multi-select option').on('mousedown',function (e) {
e.preventDefault();
selectTop = $(this).parent().scrollTop();
var before = $(this).prop("selected");
console.warn("before: " + before);
if (before == true) {
$(this).prop("selected", false);
}
else {
$(this).attr("selected", "selected");
}
console.info("Changed from " + before + " to " + $(this).prop('selected'));
mustChangeScrollTop = true;
return true;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>
<head>
<title>Multi select jquery test</title>
</head>
<body>
<select size="6" name="WorkSchedule" multiple="multiple" id="WorkSchedule" class="form-control multi-select">
<option value="">Select All That Apply</option>
<option value="4">Full-Time</option>
<option value="5" >Part-Time</option>
<option value="6" >Per Diem</option>
<option value="7">Locum Tenens</option>
</select>
</body>
</html>
The problem is a small one; your else statement changes the .attr value rather than the .prop value.
else {
$(this).attr("selected", "selected");
}
Attributes and properties, while similar, do not refer to the same underlying value. Here's the working solution, with .attr changed to .prop in the else statement:
$('.multi-select option').on('mousedown',function (e) {
e.preventDefault();
selectTop = $(this).parent().scrollTop();
var before = $(this).prop("selected");
console.warn("before: " + before);
if (before == true) {
$(this).prop("selected", false);
}
else {
$(this).prop("selected", "selected");
}
console.info("Changed from " + before + " to " + $(this).prop('selected'));
mustChangeScrollTop = true;
return true;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>
<head>
<title>Multi select jquery test</title>
</head>
<body>
<select size="6" name="WorkSchedule" multiple="multiple" id="WorkSchedule" class="form-control multi-select">
<option value="">Select All That Apply</option>
<option value="4">Full-Time</option>
<option value="5" >Part-Time</option>
<option value="6" >Per Diem</option>
<option value="7">Locum Tenens</option>
</select>
</body>
</html>
if i understood what you meant exactly, then this should be what you want with a slitly small change.
$('.multi-select option').on('mousedown',function (e) {
e.preventDefault();
selectTop = $(this).parent().scrollTop();
var before = $(this).prop("selected");
console.warn("before: " + before);
if (before == true) {
$(this).prop("selected", false);
}
else {
$(this).prop("selected", true); //the change is here
}
console.info("Changed from " + before + " to " + $(this).prop('selected'));
mustChangeScrollTop = true;
return true;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>
<head>
<title>Multi select jquery test</title>
</head>
<body>
<select size="6" name="WorkSchedule" multiple="multiple" id="WorkSchedule" class="form-control multi-select">
<option value="">Select All That Apply</option>
<option value="4">Full-Time</option>
<option value="5" >Part-Time</option>
<option value="6" >Per Diem</option>
<option value="7">Locum Tenens</option>
</select>
</body>
</html>
I have a select option that uses select 2 plugin like this
<select id ="temp">
<option value="1" data-width="24" data-length="12">First</option>
<option value="3" data-width="32" data-length="24" >Second</option>
<option value="1" data-width="16" data-length="16" >Third</option>
<option value="1" data-width="8" data-length="4" >Fourth</option>
</select>
I want to get data width and length from user inputs from keyboard. I call them is customWidth and customLength.
Expert results:
When user type true customWidth and customLength select2 trigger
change selected value. Example: customWidth = 8 and customLength =
4, select 2 should be trigger selected this option
<option value="1" data-width="8" data-length="4" >Fourth</option>
Thank you for help.
You can achieve this by finding an option that has same width and length by data attribute the, if found select it then trigger change so the slect2 take new val .
See below working snippet :
$(function() {
$customWidth = $("#customwidth");
$customLength = $("#customlength");
$customWidth.on("input", function(e) {
if( $customLength.val() && this.value ) {
var el = $("#temp").find('option[data-width=' + this.value + '][data-length=' + $customLength.val() + ']');
if (el.length > 0)
el.attr('selected', 'selected').trigger("change");
}
});
$customLength.on("input", function(e) {
if( $customWidth.val() && this.value ) {
var el = $("#temp").find('option[data-width=' + $customWidth.val() + '][data-length=' + this.value + ']');
if (el.length > 0)
el.attr('selected', 'selected').trigger("change");
}
});
$('#temp').select2({
placeholder: 'Select'
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
customWidth : <input id="customwidth" /><br/><br/> customLength : <input id="customlength" /><br/><br/>
<select id="temp" style="width: 300px">
<option></option>
<option value="1" data-width="24" data-length="12">First</option>
<option value="3" data-width="32" data-length="24">Second</option>
<option value="1" data-width="16" data-length="16">Third</option>
<option value="1" data-width="8" data-length="4">Fourth</option>
</select>
This is perfectly working only for width. Try yourself to implement length too.
HTML
<select id ="temp">
<option value="1" data-width="24" data-length="12">First</option>
<option value="3" data-width="32" data-length="24" >Second</option>
<option value="1" data-width="16" data-length="16" >Third</option>
<option value="1" data-width="8" data-length="4" >Fourth</option>
</select>
<input type="text" id="width">
JQUERY
$('#temp').select2({
});
$('#width').keyup(function(){
var widthVal= $(this).val()
$("#temp option").each(function(){
if($(this).attr('data-width')==widthVal){
$('#temp option[data-width="'+widthVal+'"]').prop('selected','selected').change()
}
})
})
I am new to JavaScript and I am trying to make an html page with JavaScript inside it.
The idea is that, when someone selects the value of option from the select, it should generate automatically the fields of firstName, lastName etc depending on the number which is selected. If one is selected then it should have one field of firstName, lastName and if two is selected then it should generate two fields dynamically.
<select id="noOfAuthor" multiple="multiple">
<option value="one">1</option>
<option value="two">2</option>
<option value="three">3</option>
<option value="four">4</option>
<option value="five">5</option>
</select>
If someone selects one then below there should be one code of
Title Name <input type="text" name="txtTitle1">
Author Name <input type="text" name="txtAuthor1" >
Copy right<input type="text" name="txtCopyrightYear1">
If we selects “2” then there should be two code asking
Title Name <input type="text" name="txtTitle1">
Author Name <input type="text" name="txtAuthor1" >
Copy right<input type="text" name="txtCopyrightYear1">
Title Name <input type="text" name="txtTitle2">
Author Name <input type="text" name="txtAuthor2" >
Copy right<input type="text" name="txtCopyrightYear2">
And so on and so forth.
I tried to write a code for doing this, but it is not working.
<html>
<head>
<title>Book Collection</title>
<script language="JavaScript">
function WBook(bookName, writer, yearPublished)
{
this.Title = bookName;
this.Author = writer;
this.CopyrightYear = yearPublished;
}
function showBook(oneBook)
{
var no = showChoices();
var i ;
for(i =0; i<no; i++)
{
document.frmBooks.txtTitle[i].value = oneBook.Title[i];
document.frmBooks.txtAuthor[i].value = oneBook.Author[i];
document.frmBooks.txtCopyrightYear[i].value = oneBook.CopyrightYear[i];
}
}
function displayCollection()
{
var aBook = new WBook("Visual C++ From the Ground Up", "John Paul Mueller", 1998);
showBook(aBook);
}
function showChoices(){
var noOfAuthor = document.getElementById("noOfAuthor");
var result = " You selected";
result += " \n";
for(i=0; i<noOfAuthor.length;i++){
currentOption = noOfAuthor[i];
if(currentOption.selected == true){
result += currentOption.value + "\n";
}
}
result += " \n";
alert(result);
return(result);
}
</Script>
</head>
<body>
<h1>Book Collection</h1>
<form name="frmBooks">
<input type="hidden" name="id" value="" required="true" /><br> <br>
<select id="noOfAuthor" >
<option value="one">1</option>
<option value="two">2</option>
<option value="three">3</option>
<option value="four">4</option>
<option value="five">5</option>
</select>
<button type="button" onclick="showChoices()">Submit</button>
Title Name <input type="text" name="txtTitle1">
Author Name <input type="text" name="txtAuthor1" >
Copy right<input type="text" name="txtCopyrightYear1">
Title Name <input type="text" name="txtTitle2">
Author Name <input type="text" name="txtAuthor2" >
Copy right<input type="text" name="txtCopyrightYear2">
<p><input type="button" value="Show Collection" name="btnShow" onClick="displayCollection()">
</form>
</body>
</html>
You can solve it like this (jsFiddle demo):
<html>
<head>
<title>Book Collection</title>
<script language="JavaScript">
function WBook(bookName, writer, yearPublished)
{
this.Title = bookName;
this.Author = writer;
this.CopyrightYear = yearPublished;
}
function showBook(oneBook)
{
var no = showChoices();
var i ;
for(i =0; i<no; i++)
{
document.frmBooks.txtTitle[i].value = oneBook.Title[i];
document.frmBooks.txtAuthor[i].value = oneBook.Author[i];
document.frmBooks.txtCopyrightYear[i].value = oneBook.CopyrightYear[i];
}
}
function displayCollection()
{
var aBook = new WBook("Visual C++ From the Ground Up", "John Paul Mueller", 1998);
showBook(aBook);
}
function showChoices(){
var noOfAuthor = document.getElementById("noOfAuthor");
var result = " You selected";
result += " \n";
result += noOfAuthor.value
for(i=1; i <= noOfAuthor.length;i++){
if(i <= noOfAuthor.value){
document.getElementById("inputs" + i).style.display = 'block';
} else {
document.getElementById("inputs" + i).style.display = 'none';
}
}
result += " \n";
alert(result);
return(result);
}
</Script>
</head>
<body>
<h1>Book Collection</h1>
<form name="frmBooks">
<input type="hidden" name="id" value="" required="true" /><br> <br>
<select id="noOfAuthor" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<button type="button" onclick="showChoices()">Submit</button>
<div id="inputs1">
Title Name <input type="text" name="txtTitle1">
Author Name <input type="text" name="txtAuthor1" >
Copy right<input type="text" name="txtCopyrightYear1">
</div>
<div id="inputs2" style="display:none">
Title Name <input type="text" name="txtTitle2">
Author Name <input type="text" name="txtAuthor2" >
Copy right<input type="text" name="txtCopyrightYear2">
</div>
<div id="inputs3" style="display:none">
Title Name <input type="text" name="txtTitle3">
Author Name <input type="text" name="txtAuthor3" >
Copy right<input type="text" name="txtCopyrightYear3">
</div>
<div id="inputs4" style="display:none">
Title Name <input type="text" name="txtTitle4">
Author Name <input type="text" name="txtAuthor4" >
Copy right<input type="text" name="txtCopyrightYear4">
</div>
<div id="inputs5" style="display:none">
Title Name <input type="text" name="txtTitle5">
Author Name <input type="text" name="txtAuthor5" >
Copy right<input type="text" name="txtCopyrightYear5">
</div>
<p><input type="button" value="Show Collection" name="btnShow" onClick="displayCollection()">
</form>
</body>
</html>
very simple with jquery:
<select id="noOfAuthor" multiple="multiple">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<div id="inputs"></div>
$( document ).ready(function() {
$("select#noOfAuthor > option").click(function() {
$( "#noOfAuthor" ).attr("disabled", true);
var howMuch = parseInt($( "#noOfAuthor" ).val());
for(i = 0; i < howMuch; i++) {
$( "#inputs" ).append('Title Name: <input type="text" name="txtTitle' + i + '"><br>Author Name: <input type="text" name="txtAuthor' + i + '"><br>Copy right: <input type="text" name="txtCopyrightYear' + i + '"><br><hr />');
}
});
});
So you get inputs as the selected number.
the Three first willl be:
name="txtTitle0"
name="txtAuthor0"
name="txtCopyrightYear0"
demo: http://jsfiddle.net/mxgbc/3/
I would generate the inputs and labels dynamically. This is a pure javascript example, without using jQuery. I can provide a jQuery solution if you need it.
Example http://jsfiddle.net/A62qA/1 // basic select menu
Example http://jsfiddle.net/A62qA/2/ // mutiple choice select menu
HTML
<select id="noOfAuthor" onchange="inputFunction(this)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<div id="myContainer"></div>
JavaScript
function createInputs(i) {
var myContainer = document.getElementById("myContainer");
var titleName = document.createElement("input");
titleName.setAttribute('name', 'txtTitle1' + i);
var label = document.createElement("Label");
label.innerHTML = "Title Name";
myContainer.appendChild(label);
myContainer.appendChild(titleName);
var authorName = document.createElement("input");
authorName.setAttribute('name', 'txtAuthor1' + i);
var label = document.createElement("Label");
label.innerHTML = "Author Name";
myContainer.appendChild(label);
myContainer.appendChild(authorName);
var copyRight = document.createElement("input");
copyRight.setAttribute('name', 'txtCopyrightYear1' + i);
var label = document.createElement("Label");
label.innerHTML = "CopyRight";
myContainer.appendChild(label);
myContainer.appendChild(copyRight);
}
function inputFunction(y) {
var y = y.value;
var myContainer = document.getElementById("myContainer");
for (var i = 0; i < y; i++) {
createInputs(i);
}
}
I want to have my States select dropdown only be visible after a country has been chosen in a prior dropdown.
Here is my code:
<form>
Name: <input type="text" name="name" autofocus>
<br />
E-mail: <input type="text" name="email">
<br />
<input type="radio" name="sex" value="male">Male
<br />
<input type="radio" name="sex" value="female">Female
<br />
<select name="country" onchange="showStates()" id="country">
<option>Select A Country</option>
<option id="US" value="US">USA</option>
<option id="AUS" value="AUS">Australia</option>
</select>
<br />
<select name="State" style="display:none;" id="us-states">
<option>Select A State</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
</select>
<br />
<select name="State" style="display:none;" id="aus-states">
<option value="" selected="selected">Select A State</option>
<option value="TAS">Tasmania</option>
<option value="QLD">Queensland</option>
<option value="VIC">Victoria</option>
</select>
<br />
<button type="submit">Submit</button>
<br />
<input type="reset" value="Reset">
</form>
Here is the showStates() function:
function showStates() {
var selected = $('#country :selected').text();
if (selected == "US") {
document.getElementByID('us-states').style.display = "block;";
} else {
document.getElementByID('us-states').style.display = "none;";
}
if(selected == "AUS") {
document.getElementByID('aus-states').style.display = "block;";
} else {
document.getElementByID('aus-states').style.display = "none;";}
}
}
I'm finding that the program initially hides the select boxes, but doesn't redraw them when a new option is selected in the country tag.
Since you're already using jQuery you can do away with the inline function call. Just add a change handler, and use the value of #country to determine which element to show:
$('#country').on('change', function() {
var country = this.value.toLowerCase();
$('select[name="State"]').hide()
.filter('#' + country + '-states')
.show();
});
Here's a fiddle
You can do this way using jQuery:
$('#country').on('change', function() {
var selected = $(this).val();
if(selected === "US") {
$('#us-states').show();
}
else {
$('#us-states').hide();
}
if(selected === "AUS") {
$('#aus-states').show();
}
else {
$('#aus-states').hide();
}
});
}
Fiddle Example HERE
OR:
$('#country').on('change',function()
{
var selected = $(this).val();
showStates(selected);
});
ShowStates Function:
function ShowStates(value)
{
if(value === "US") {
$('#us-states').show();
}
else {
$('#us-states').hide();
}
if(value === "AUS") {
$('#aus-states').show();
}
else {
$('#aus-states').hide();
}
}
Fiddle With Existing Function Reuse
How is this?
function showStates(id)
{
$("#"+id).css("display", "block");
}
$("#country").on("change", function(){
showStates('us-states');
});
http://jsfiddle.net/Lukx8/
so i have a table as follows:
<select id="CellLayout" style="color:#99FF00; font-family:monospace;" onChange="PipeConfigChange(this.value);">
<option>select layout</option>
<option>blinker</option>
<option>glider</option>
<option>flower</option>
<option>custom</option>
</select>
on default, 'select layout' is what is displayed. on the click of a button, i need the select box to display 'custom'. i tried searching around SO, but I'm trying to do this without Jquery..
Try this... Its simple... Really Works..
<script type="text/javascript">
function fun()
{
document.getElementById("CellLayout").selectedIndex = 4;
}
</script>
<form name="f1">
<select id="CellLayout" style="color:#99FF00; font-family:monospace;" >
<option>select layout</option>
<option>blinker</option>
<option>glider</option>
<option>flower</option>
<option>custom</option>
</select>
<input type="button" onclick="fun()"/>
</form>
You can just change the selects value, like so :
<select id="CellLayout" style="color:#99FF00; font-family:monospace;" onChange="PipeConfigChange(this.value);">
<option>select layout</option>
<option>blinker</option>
<option>glider</option>
<option>flower</option>
<option>custom</option>
</select>
<input type="button" value="change" onclick="change()" />
<script type="text/javascript">
function change() {
document.getElementById('CellLayout').value = 'custom';
}
</script>
FIDDLE
You can try it:
<select id="CellLayout" style="color:#000; font-family:monospace;" onChange="PipeConfigChange(this.value);">
<option value="0">select layout</option>
<option value="1">blinker</option>
<option value="2">glider</option>
<option value="3">flower</option>
<option value="4">custom</option>
</select>
<input id="btn" type="submit" value="setSelected">
<script type="text/javascript">
var btn = document.getElementById('btn');
btn.onclick = function(){
var layOut = document.getElementById('CellLayout');
for(var i = 0; i < layOut.length; i++){
if(layOut.options[i].value == '4'){
layOut.selectedIndex = i;
}
}
}
</script>
According to my understand of your question. May be following is your answer. Please check.
In html:
<select id="CellLayout" style="color:#99FF00; font-family:monospace;" onChange="PipeConfigChange(this.value);">
<option>select layout</option>
<option>blinker</option>
<option>glider</option>
<option>flower</option>
<option>custom</option>
</select>
<input type="button" value="clickHere" onclick="javascript:call()"/>
In javascript:
function call() {
var textToFind = 'custom';
var dd = document.getElementById('CellLayout');
for (var i = 0; i < dd.options.length; i++) {
if (dd.options[i].text === textToFind) {
dd.selectedIndex = i;
break;
}
}
}