Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Sep 2011
    Posts
    178
    Thanks
    138
    Thanked 0 Times in 0 Posts

    Deleting an option value from a select box

    Hello,

    I need your help.

    I am still relatively new to javascript, and would like add functionality so as to be able to delete the highlighted value from the drop box.

    Here is my current HTML markup:

    Code:
    <!DOCTYPE html>
    
    <html>
    
    <head>
    
    <script type="text/javascript">
    function getvalue(x) {
    
    document.getElementById('input').value = x
    
    }
    
    </script>
    
    </head>
    
    <body>
    
    <input type="text" id="input">
    <br>
    <select id="list" onchange="getvalue(this.value)">
        <option value=""></option>
        <option value="ABC">ABC</option>
        <option value="DEF">DEF</option>
        <option value="GHI">GHI</option>
        <option value="JKL">JKL</option>
        <option value="MNO">MNO</option>
    </select>
    
    </body>
    
    </html>
    Much thanks and appreciation for everyones help and support

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,026
    Thanks
    36
    Thanked 494 Times in 488 Posts
    When is the value to be deleted?
    Upon selection in the drop down or via another button that confirms the deletion request?
    Is there ever a restoration of the value to the list without the need of a reload/refresh of the browser?


    For a quick and dirty answer, see: http://www.w3schools.com/jsref/met_select_remove.asp

    Lilke:
    Code:
    <html>
    <head>
    <script>
    function removeOption() {
      var x=document.getElementById("mySelect");
      document.getElementById('SBoxRemove').value = x.value;
      x.remove(x.selectedIndex);
    }
    </script>
    </head>
    <body>
    
    <form>
    <input type="text" id="SBoxRemove"><p>
    <select id="mySelect">
      <option value="Apple">Apple</option>
      <option value="Pear">Pear</option>
      <option value="Banana">Banana</option>
      <option value="Orange">Orange</option>
      <option value="Cherry">Cherry</option>
      <option value="Peach">Peach</option>
      <option value="Blueberry">Blueberry</option>
    </select>
    <input type="button" onclick="removeOption()" value="Remove option">
    </form>
    
    </body>
    </html>
    Last edited by jmrker; 09-20-2013 at 03:10 PM.

  • Users who have thanked jmrker for this post:

    jason_kelly (09-20-2013)

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    What is the purpose of this? Are you trying to do something like "First Choice" "Second Choice" and stopping the user making the same selection twice?

    Code:
    <form id='myform'>
    <select name = 'list1' id = 'list1' onchange = "removeOptions(this)">
    <option selected value=""> Choose A Fruit</option>
    <option value='Mango'> Mango </option>
    <option value='Apple'> Apple </option>
    <option value='Sunkist'> Sunkist </option>
    <option value='Watermelon'> Watermelon </option>
    <option value='Papaya'> Papaya </option>
    <option value='Strawberry'> Strawberry </option>
    <option value='Banana'> Banana </option>
    <option value='Peach'> Peach </option>
    </select>
    
    </form>
    
    <script type = "text/javascript">
    var val = "";
    function removeOptions(selectbox) {
    val = selectbox.value;
    alert ("You have chosen " + val);
    for (var i = selectbox.options.length-1; i>=1; i--) {
    if (selectbox.options[i].selected) {
    selectbox.remove(i);
    }
    }
    }
    
    </script>
    Last edited by Philip M; 09-20-2013 at 03:19 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    jason_kelly (09-20-2013)

  • #4
    Regular Coder
    Join Date
    Aug 2010
    Posts
    945
    Thanks
    19
    Thanked 205 Times in 203 Posts
    Code:
     
    <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript">
    function getvalue(sel) {
      input.value = (sel.removeChild(sel.options[sel.selectedIndex])).value + "has been removed";
    }
    </script>
    </head>
    <body>
    <input type="text" id="input" size="50">
    <br>
    <select id="list" onchange="getvalue(this)">
        <option value=""></option>
        <option value="ABC">ABC</option>
        <option value="DEF">DEF</option>
        <option value="GHI">GHI</option>
        <option value="JKL">JKL</option>
        <option value="MNO">MNO</option>
    </select>
    </body>

  • Users who have thanked DaveyErwin for this post:

    jason_kelly (09-20-2013)

  • #5
    Regular Coder
    Join Date
    Sep 2011
    Posts
    178
    Thanks
    138
    Thanked 0 Times in 0 Posts
    Thanks very much all for your wonderful help.


  •  

    Posting Permissions

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