Hi I have a page like this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<style>
.add-another-cat {
/*float:right; */
background-image:url(add_btn.png);
width:18px;
height:18px;
}
</style>
<!-- for list -->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em; }
html>body #sortable li { height: 1.5em; line-height: 1.2em; }
.ui-state-highlight { height: 1.5em; line-height: 1.2em; }
</style>
<script>
$(function() {
$( "#sortable" ).sortable({
placeholder: "ui-state-highlight"
});
$( "#sortable" ).disableSelection();
});
</script>
</head>
<body>
<script language="javascript">
//<![CDATA[
$(window).load(function(){
$('.add-another-cat').click(function(event){
event.preventDefault();
var $orDiv = $('.new-category:last').after($('#clone').clone().removeAttr('id').show());
});
$('.new-categories').html($('#clone').clone().removeAttr('id').show());
});//]]>
</script>
<div id="clone" class="new-category" style="display:none;">
<select class="category-select" name="localprojects">
<option value="1">mca 1</option>
<option value="2">mca 2</option>
</select>
<===>
<select class="category-select" name="remoteprojects">
<option value="z1">zoho 1</option>
<option value="z2">zoho 2</option>
</select>
<select class='category-select-sub' style="display:none">
<!-- loaded from ajax -->
</select>
</div>
<div class="new-categories" style="display: inline-block;">
</div>
<a href="#" class="add-another-cat smallest" style="display: inline-block;"></a>
<ul id="sortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
<li class="ui-state-default">Item 6</li>
<li class="ui-state-default">Item 7</li>
</ul>
</body>
</html>
I like to get the selected values from the 2 comboboxes, combine them together as a string and add to the list below.
For example: if user selects “mca 1” (value “1”) and “zoho 2” (value “z2”) then the following html code should be auto generated.
<li class="ui-state-default" value="1-z2">mca 1 - zoho 2</li>
Would you please tell me how to do this? Thanks.
Hi there,
Welcome to the forums
I would do it like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- http://www.sitepoint.com/forums/showthread.php?1173132-Get-data-from-2-comboboxes-and-add-to-a-list -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em; }
html>body #sortable li { height: 1.5em; line-height: 1.2em; }
.ui-state-highlight { height: 1.5em; line-height: 1.2em; }
div{ padding: 10px; }
</style>
</head>
<body>
<div>
<select class="category-select" name="localprojects">
<option value="1">mca 1</option>
<option value="2">mca 2</option>
</select>
<===>
<select class="category-select" name="remoteprojects">
<option value="z1">zoho 1</option>
<option value="z2">zoho 2</option>
</select>
<button id="addButton">Add item</button>
</div>
<ul id="sortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
<li class="ui-state-default">Item 6</li>
<li class="ui-state-default">Item 7</li>
</ul>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$("#sortable").sortable({ placeholder: "ui-state-highlight" }).disableSelection();
$("#addButton").on("click", function(){
var s1 = $(".category-select").eq(0).find("option:selected"),
s2 = $(".category-select").eq(1).find("option:selected"),
newText = s1.text() + " - " + s2.text();
newValue = s1.val() + "-" + s2.val();
listElement = $("<li>", {class: "ui-state-default", text: newText, value: newValue});
$("#sortable").append(listElement);
});
</script>
</body>
</html>
Here’s a demo.
BTW, please note that you are including jQuery twice.
At best this is superfluous, at worst this is going to make things behave unexpectedly.
it works :tup: thanks Would you please also tell me how to check if an item already existing in the list before inserting it? That’d be great Thanks. sorry I’m new in jquery.
What would be the criteria to check?
The value of the option tag? The text value? Both?
sorry I forgot. I’d like to check based on the option value. Thanks.
I’d do it like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- http://www.sitepoint.com/forums/showthread.php?1173132-Get-data-from-2-comboboxes-and-add-to-a-list -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em; }
html>body #sortable li { height: 1.5em; line-height: 1.2em; }
.ui-state-highlight { height: 1.5em; line-height: 1.2em; }
div{ padding: 10px; }
</style>
</head>
<body>
<div>
<select class="category-select" name="localprojects">
<option value="1">mca 1</option>
<option value="2">mca 2</option>
</select>
<===>
<select class="category-select" name="remoteprojects">
<option value="z1">zoho 1</option>
<option value="z2">zoho 2</option>
</select>
<button id="addButton">Add item</button>
</div>
<ul id="sortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
<li class="ui-state-default">Item 6</li>
<li class="ui-state-default">Item 7</li>
</ul>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
function elementAlreadyExists(val){
var elementAlreadyExists = false;
$("#sortable > li").each(function(){
var currVal = $(this).data("value");
if(currVal === val){
elementAlreadyExists = true;
return;
}
});
return elementAlreadyExists;
}
$("#sortable").sortable({ placeholder: "ui-state-highlight" }).disableSelection();
$("#addButton").on("click", function(){
var s1 = $(".category-select").eq(0).find("option:selected"),
s2 = $(".category-select").eq(1).find("option:selected"),
newText = s1.text() + " - " + s2.text();
newValue = s1.val() + "-" + s2.val();
listElement = $("<li>", {class: "ui-state-default", text: newText, 'data-value': newValue});
if (elementAlreadyExists(newValue)){
alert("Already Exists!");
} else {
$("#sortable").append(listElement);
}
});
</script>
</body>
</html>
Also AFAIK, a <li> element doesn’t have a value attribute, so it is better to store the value as a data attribute (which I have reflected in my new code).