Question 308585 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Using jquery to find values that are regular expressions in a html select

I am trying to retrieve the index of html elements in a list using Jquery 3.4+.
The common solution can be found in posts like this one or this one.

I have implemented it and it runs well until the values I am trying to retrieve are none others than regular expressions.
Here’s a fiddle of what I have tried:

//let myVar = $("#myList").find(`option[text='^.*.xlsx'])`)[0].index;
let myVar = $("#myList").find(`option:contains('^.*.xlsx')`)[0].index;
console.log(myVar+"");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select size="1" id="myList"> 
     <option selected style="width:100%;">^.+.(txt|csv|xlsx)</option>
     <option style="width:100%;">^.+.(jpg|jpeg|png|svg|bmp)</option>
     <option style="width:100%;">^.*.xlsx</option>
     <option style="width:100%;">^.*.docx</option>
     <option style="width:100%;">^.*.csv</option>
     <option style="width:100%;">^.*.pdf</option>
</select>

I’d like to add that I can’t escape characters nor change the value of what I’m looking for.
Is there a way to get it working for any value regardless of it being a standard text, a regular expression or whatever could be injected in the search function?

Tags:

3

Answers


  1. 0

    In the snippet you provide there are few mistake.

    1. $("myList") need to be $("#myList") because your select has id id="myList".
    2. You are trying to get option based on text attribute with option[text='^.*.xlsx']) but you don’t have text attribute in your option.
    3. Your option text has escape character so in your js you need \ for the equivalent in html. Also, I noticed that contains('') retuned undefined while doing contains('^.*\.xlsx') and you need contains('^.*\\.xlsx').

    I have created following workaround to get the index of option based on the text in option. See the following example:

    let myVar = $("#myList").find("option");

var itemIndex;
myVar.map(function(i, v) {
  if ($(v).text() == '^.*\.xlsx') {
    itemIndex = i;
  }
});

console.log(itemIndex);

let index = $("#myList option:contains('^.*\\.xlsx')").index();
console.log(index);
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select size="1" id="myList">
  <option selected style="width:100%;">^.+.(txt|csv|xlsx)</option>
  <option style="width:100%;">^.+.(jpg|jpeg|png|svg|bmp)</option>
  <option style="width:100%;">^.*.xlsx</option>
  <option style="width:100%;">^.*.docx</option>
  <option style="width:100%;">^.*.csv</option>
  <option style="width:100%;">^.*.pdf</option>
</select>
    Login or Signup to reply.
  2. 0

    Still using the same strategy adopting jQuery to select the element through the :contains selector https://api.jquery.com/contains-selector/#contains1

    But you need to escape the backslash replacing each one with \\

    Here’s a demo that is simulating the input data fetch grabbing it from a text input value:

    function fetchInput(){
  return document.getElementById('input').value;    
}

function search(){
  const searchTerm = fetchInput();
  const escaped = searchTerm.replace(/\/g, '\\');

  let index = $(`#myList option:contains('${escaped}')`)?.index();

  console.log(`index: ${index}`);
}
    button{
  cursor: pointer;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h1>Search</h1>
<input id="input" value="^.*.xlsx">
<button onclick="search();">Search</button>

<hr>

<select size="1" id="myList"> 
     <option selected style="width:100%;">^.+.(txt|csv|xlsx)</option>
     <option style="width:100%;">^.+.(jpg|jpeg|png|svg|bmp)</option>
     <option style="width:100%;">^.*.xlsx</option>
     <option style="width:100%;">^.*.docx</option>
     <option style="width:100%;">^.*.csv</option>
     <option style="width:100%;">^.*.pdf</option>
</select>
    Login or Signup to reply.
  3. 0

    It seems you’re trying to find the index of the option element that contains the text ‘.xlsx’ when selected from the dropdown. The issue with your code is that you’re using the .index() method directly on the selector, which returns the index of the first matched element.

    try this:

    $(document).ready(function() {
  $("#myList").change(function() {
    let selectedOption = $(this).find("option:selected");
    let selectedIndex = $(this).find("option").index(selectedOption);
    console.log("Selected Index:", selectedIndex);
  });
});
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js" type="text/javascript"></script>
<select size="1" id="myList">
  <option selected style="width:100%;">^.+.(txt|csv|xlsx)</option>
  <option style="width:100%;">^.+.(jpg|jpeg|png|svg|bmp)</option>
  <option style="width:100%;">^.*.xlsx</option>
  <option style="width:100%;">^.*.docx</option>
  <option style="width:100%;">^.*.csv</option>
  <option style="width:100%;">^.*.pdf</option>
</select>

    this will give you selected option Index.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search