How to return this array index for selector in jQuery?

Question

How do I make alert() return either 123, 456 or the nth group key?

I wanna retrieve the index key is to do some chain operations on the corresponding option values.

Note: The index keys could just as well be alphanumeric.

HTML:

<select name="option[group][123]">
    <option>a</option>
    <option>b</option>
</select>
<select name="option[value][123]">
    <option>1</option>
    <option>2</option>
</select>

<select name="option[group][456]">
    <option>a</option>
    <option>b</option>
</select>
<select name="option[value][456]">
    <option>1</option>
    <option>2</option>
</select>

Script:

$("select[name^='option[group]']").change(function(){
  alert('Index:' + $(this).fieldsetIndexKeyIdentifier());
  // Do something with option values of group
});

Since .index() is not the thing. I could just as well state .dummy() — tim
– tim, Commented Apr 22, 2012 at 20:36

jfriend00 · Accepted Answer · 2012-04-22 21:24:06Z

2

You can parse it out of the name attribute like this:

$("select[name^='option[group]']").change(function(){
    var nums = this.name.match(/\[(\d+)\]$/)
    if (nums) {
        alert('Index:' + nums[1]);
    }
  // Do something with option values of group
});

Working demo here: http://jsfiddle.net/jfriend00/TcRzW/

Or, if you want any sequence of characters from the last index in the name, it would be this:

$("select[name^='option[group]']").change(function(){
    var nums = this.name.match(/\[([^\]]+)\]$/)
    if (nums) {
        alert('Index:' + nums[1]);
    }
  // Do something with option values of group
});

Working demo here: http://jsfiddle.net/jfriend00/TcRzW/

If you now want to know which group number you're working on, you can do that like this:

var selectGroups$ = $("select[name^='option[group]']");
selectGroups$.change(function(){
    var index = selectGroups$.index(this);
    // index will be a number like 0, 1, 2, 3 for which
    // sequential "select[name^='option[group]']" we are operating on.
});

edited Apr 22, 2012 at 21:24

answered Apr 22, 2012 at 20:22

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

tim Over a year ago

That would only work for numeric index keys. Is there no conventional way of doing this? Like $(this).parent.something(...)

user1106925 Over a year ago

@tim: I don't speak for jfriend00, but IMO, the conventional way is to be a programmer, and write a little code that does what you need.

jfriend00 Over a year ago

@tim - the data is ONLY available inside the name string. As far as the browser is concerned the name is just a string. The [xxx] is a convention in the name that gets used by other parts of the process. If you want to parse out whatever is in the last [] in the name, then the regex can be change to take any sequence of characters. I've added that option to my answer too.

tim Over a year ago

Is it smarter to get the nth key index rather than the key index name? I later need to pass this on to the corresponding group of option value.

jfriend00 Over a year ago

I don't know what "nth key index" is. Are you now asking a different question? If so, please explain what that is. If you're trying to find which group number sequentially on the page you're in, I've added that as a third option to my answer.

|

tim · Accepted Answer · 2012-05-06 05:18:13Z

-1

This does not directly answer the question but I accomplished chained select fields like this:

$("select[name^='option[group]']").change(function(){
    var valueField = this.name.replace(/group/, 'value');
    $("select[name='"+ valueField +"']").somefunction(...);
});

edited May 6, 2012 at 5:18

answered Apr 22, 2012 at 21:33

tim

2,7363 gold badges33 silver badges49 bronze badges

Collectives™ on Stack Overflow

How to return this array index for selector in jQuery?

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related