SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Oct 2013
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Get data from 2 comboboxes and add to a list

    Hi I have a page like this

    Code:
    <!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.

    Code:
    <li class="ui-state-default" value="1-z2">mca 1 - zoho 2</li>
    Would you please tell me how to do this? Thanks.

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,999
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    Welcome to the forums

    I would do it like this:

    Code:
    <!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.

  3. #3
    SitePoint Member
    Join Date
    Oct 2013
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    it works 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.

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,999
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    What would be the criteria to check?
    The value of the option tag? The text value? Both?

  5. #5
    SitePoint Member
    Join Date
    Oct 2013
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Quote Originally Posted by Pullo View Post
    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.

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,999
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    I'd do it like this:

    Code:
    <!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).

    Edit:

    Looks like I was wrong: http://html5doctor.com/ol-element-attributes/

  7. #7
    SitePoint Member
    Join Date
    Oct 2013
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    thanks it works


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •