Of Stack

jquery operates on select elements and option instance code

  • 2020-12-18 01:44:12
  • OfStack

Without further ado, I will post the code directly to you. The specific code is as follows: 


<html>
<head>
  <title></title>
  <!-- add jquery-->
  <script src="../Script/jQuery/jquery-1.6.2.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function () {
      createSelect("addSel");
      addOption("addSel", "first", " The first 1 A data ");
      addOption("addSel", "secord", " The first 2 A data ");
      addOption("addSel", "three", " The first 3 A data ");
      addOption("addSel", "four", " The first 4 A data ");
      addOption("addSel", "fives", " The first 5 A data ");
      removeOneByIndex("addSel", 0);
      removeOneByValue("addSel", "three");

      //**************** To verify that it cannot be based on text Values obtained option The element ***********************
      //removeOneByText("addSel", " The first 3 A data ");
      //**************** To verify that it cannot be based on text Values obtained option The element ***********************

      //removeAll("addSel");   // delete select All of the elements options
      //removeSelect("addSel"); // delete select Elements; 

      setDefaultByValue("addSel", "four"); // Set up the option The default value of 

      // add 1 a option Change event   Call a self-written method 
      $("#addSel").change(function () {
        alert(" The old text: " + getOptionText("addSel") + "    The old Value : " + getOptionValue("addSel"));
        editOptions("addSel", " New text ", " new Value"); // Note: No value The value of  value The default value text The value of the 
        alert(" New text: " + getOptionText("addSel") + "    new Value : " + getOptionValue("addSel"));
      })
    })

    // Dynamic creation tape id the select
    function createSelect(id) {
      $("body").append("<select id="+id+"></select>");
    }

    // According to the select the id  Add a option option
    function addOption(selectID,value,text) {
      // According to the id To find the select Object,  
      var obj = $("#" + selectID + "");
      $("<option></option>").val(value).text(text).appendTo(obj);
    }

    // According to the value The value of the options Default selection 
    function setDefaultByValue(selectID,value) {
      var obj = $("#" + selectID + "");
      obj.val(value);
    }

    // Get selected Option Value ; 
    function getOptionValue(selectID) {
      //var obj = $("#" + selectID + " option:selected").val(); 
      // Either the top or the bottom works 
      var obj = $("#" + selectID + "").find("option:selected").val();
      return obj;
    }

    // Get selected option Text;
    function getOptionText(selectID) {
      //var obj = $("#" + selectID + " option:selected").text();
      // Either the top or the bottom works 
      var obj = $("#" + selectID + "").find("option:selected").text();
      return obj;
    }

    // Modify the selected option
    function editOptions(selectID, newText, newValue) {
      var obj = $("#" + selectID + "").find("option:selected");
      obj.val(newValue).text(newText);
    }

    // According to the  index  Value to delete 1 An option option
    function removeOneByIndex(selectID, index) {
      var obj = $("#" + selectID + " option[index=" + index + "]");
      obj.remove();
    }

    // According to the  value Value to delete 1 An option option
    function removeOneByValue(selectID, text) {
      var obj = $("#" + selectID + " option[value=" + text + "]");
      obj.remove();
    }

    //**************** To verify that it cannot be based on text Values obtained option The element ***********************
    // According to the text Value to delete 1 An option option   Sensory unavailability   really 
    //function removeOneByText(selectID, text) {
    //var obj = $("#" + selectID + " option[text=" + text + "]");
    //obj.remove();
    //}
    //**************** To verify that it cannot be based on text Values obtained option The element ***********************

    // Remove all options option
    function removeAll(selectID) {
      var obj = $("#" + selectID + "");
      obj.empty();
    }

    // delete select
    function removeSelect(selectID){
      var obj = $("#" + selectID + "");
      obj.remove();
    }
  </script>
</head>
<body>

</body>
</html>

The above is the jquery operation select elements and option example code shared by this site, I hope to help you.

Related articles: