CODEWITHSUNDEEP
jquery
Ronald Fuster
Ronald Fuster

Reputation: 23

Delete a text in a drop-down list with jquery

I need to delete what is written on a list of tools, serious problem, I can not find the correct code, it works perfect if it has value but in my case I need to delete what is written on the drop-down list

<html lang="en">

<head>
  <meta charset="utf-8">
  <title>keypress demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>

<body>
  <select name="selectBox" id="selectBox">
    <option value="1">option1</option>
    <option value="2">option2</option>
    <option value="3">option3</option>
    <option value="4">option4</option>
  </select>
  <script>
    //it does not work
    //$("select[name^=selectBox]").option("[text='option1']").remove();
    //$("select[name^=selectBox] option[text='option1']").remove();

    //if it works but I need to delete what is written in the options
    $("select[name^=selectBox] option[value='1']").remove();
  </script>

Upvotes: 0

Views: 38

Answers (3)

user7143559
user7143559

Reputation:

Set an id to your option tag: <option id="yourId" value="1">option1</option> then remove the text like so: $("#yourId").html("");

Upvotes: 0

CREM
CREM

Reputation: 1991

You must set a value from the options.

Make as follows:

$("select[name^=selectBox] option[value='1']").text("");
 $("select[name^=selectBox]").value("");

For "" value, or set no matters what value from your options

Upvotes: 0

Pete
Pete

Reputation: 58442

You could use a filter:

<html lang="en">

<head>
  <meta charset="utf-8">
  <title>keypress demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>

<body>
  <select name="selectBox" id="selectBox">
    <option value="1">option1</option>
    <option value="2">option2</option>
    <option value="3">option3</option>
    <option value="4">option4</option>
  </select>
  <script>
    $("#selectBox")                             // why not use the id selector - much more efficient than an attribute selector
        .children('option')                     // get the options
        .filter(function() {                    // filter the options
          return $(this).text() === 'option1';  // only return options where their text equals option1
        }).remove();                            // remove the filtered option
  </script>
</body>
</html>

Or the :contains selector:

<html lang="en">

<head>
  <meta charset="utf-8">
  <title>keypress demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>

<body>
  <select name="selectBox" id="selectBox">
    <option value="1">option1</option>
    <option value="2">option2</option>
    <option value="3">option3</option>
    <option value="4">option4</option>
  </select>
  <script>
    $("#selectBox")                             // why not use the id selector - much more efficient than an attribute selector
        .children('option:contains("option1")') // get the options that contains option1
        .remove();                              // remove the filtered option
  </script>
</body>
</html>

Upvotes: 1

Related Questions