How to detect selected option in datalist when has duplicate option?

I have a input type text with datalist that contains duplicate option values

<input type="text" id="my-input" list="data-list">

<datalist id="data-list">

   <option value="John" data-id="1"></option>

   <option value="George" data-id="2"></option>

   <option value="John" data-id="3"></option>

</datalist>

What options i have to get the data-id when i select option. For example if i select the the second John to get 3 as id. I just found this:

$("#data-list option[value='" + $('#my-input').val() + "']").attr('data-id');

but if i chose the second john it returns 1 as id, whitch is incorrect.

edited Nov 26 '18 at 6:16

Mohammad

15.8k123664

asked Nov 26 '18 at 2:36

andrei bozdoro

354

Do you have any event handlers on input or datalist?

– Maaz Syed Adeeb
Nov 26 '18 at 2:41

Interesting, but I have a feeling that it might not be possible stackoverflow.com/questions/30022728/… Maybe all you can do is check the value after it's changed, which isn't sufficient to determine which option was clicked

– CertainPerformance
Nov 26 '18 at 2:41

i have onchange on input field. I have a feelind that u're right(it's not possible), but what option i have for a input with options and that can acccept new values?

– andrei bozdoro
Nov 26 '18 at 2:48

add a comment |

I have a input type text with datalist that contains duplicate option values

<input type="text" id="my-input" list="data-list">

<datalist id="data-list">

   <option value="John" data-id="1"></option>

   <option value="George" data-id="2"></option>

   <option value="John" data-id="3"></option>

</datalist>

What options i have to get the data-id when i select option. For example if i select the the second John to get 3 as id. I just found this:

$("#data-list option[value='" + $('#my-input').val() + "']").attr('data-id');

but if i chose the second john it returns 1 as id, whitch is incorrect.

edited Nov 26 '18 at 6:16

Mohammad

15.8k123664

asked Nov 26 '18 at 2:36

andrei bozdoro

354

Do you have any event handlers on input or datalist?

– Maaz Syed Adeeb
Nov 26 '18 at 2:41

Interesting, but I have a feeling that it might not be possible stackoverflow.com/questions/30022728/… Maybe all you can do is check the value after it's changed, which isn't sufficient to determine which option was clicked

– CertainPerformance
Nov 26 '18 at 2:41

i have onchange on input field. I have a feelind that u're right(it's not possible), but what option i have for a input with options and that can acccept new values?

– andrei bozdoro
Nov 26 '18 at 2:48

add a comment |

I have a input type text with datalist that contains duplicate option values

<input type="text" id="my-input" list="data-list">

<datalist id="data-list">

   <option value="John" data-id="1"></option>

   <option value="George" data-id="2"></option>

   <option value="John" data-id="3"></option>

</datalist>

What options i have to get the data-id when i select option. For example if i select the the second John to get 3 as id. I just found this:

$("#data-list option[value='" + $('#my-input').val() + "']").attr('data-id');

but if i chose the second john it returns 1 as id, whitch is incorrect.

edited Nov 26 '18 at 6:16

Mohammad

15.8k123664

asked Nov 26 '18 at 2:36

andrei bozdoro

354

I have a input type text with datalist that contains duplicate option values

<input type="text" id="my-input" list="data-list">

<datalist id="data-list">

   <option value="John" data-id="1"></option>

   <option value="George" data-id="2"></option>

   <option value="John" data-id="3"></option>

</datalist>

What options i have to get the data-id when i select option. For example if i select the the second John to get 3 as id. I just found this:

$("#data-list option[value='" + $('#my-input').val() + "']").attr('data-id');

but if i chose the second john it returns 1 as id, whitch is incorrect.

javascript jquery html html-datalist

edited Nov 26 '18 at 6:16

Mohammad

15.8k123664

asked Nov 26 '18 at 2:36

andrei bozdoro

354

edited Nov 26 '18 at 6:16

Mohammad

15.8k123664

asked Nov 26 '18 at 2:36

andrei bozdoro

354

edited Nov 26 '18 at 6:16

Mohammad

15.8k123664

edited Nov 26 '18 at 6:16

Mohammad

15.8k123664

edited Nov 26 '18 at 6:16

Mohammad

15.8k123664

asked Nov 26 '18 at 2:36

andrei bozdoro

354

asked Nov 26 '18 at 2:36

andrei bozdoro

354

asked Nov 26 '18 at 2:36

andrei bozdoro

354

Do you have any event handlers on input or datalist?

– Maaz Syed Adeeb
Nov 26 '18 at 2:41

Interesting, but I have a feeling that it might not be possible stackoverflow.com/questions/30022728/… Maybe all you can do is check the value after it's changed, which isn't sufficient to determine which option was clicked

– CertainPerformance
Nov 26 '18 at 2:41

i have onchange on input field. I have a feelind that u're right(it's not possible), but what option i have for a input with options and that can acccept new values?

– andrei bozdoro
Nov 26 '18 at 2:48

add a comment |

Do you have any event handlers on input or datalist?

– Maaz Syed Adeeb
Nov 26 '18 at 2:41

Interesting, but I have a feeling that it might not be possible stackoverflow.com/questions/30022728/… Maybe all you can do is check the value after it's changed, which isn't sufficient to determine which option was clicked

– CertainPerformance
Nov 26 '18 at 2:41

i have onchange on input field. I have a feelind that u're right(it's not possible), but what option i have for a input with options and that can acccept new values?

– andrei bozdoro
Nov 26 '18 at 2:48

Do you have any event handlers on input or datalist?

– Maaz Syed Adeeb
Nov 26 '18 at 2:41

Interesting, but I have a feeling that it might not be possible stackoverflow.com/questions/30022728/… Maybe all you can do is check the value after it's changed, which isn't sufficient to determine which option was clicked

– CertainPerformance
Nov 26 '18 at 2:41

i have onchange on input field. I have a feelind that u're right(it's not possible), but what option i have for a input with options and that can acccept new values?

– andrei bozdoro
Nov 26 '18 at 2:48

add a comment |

2 Answers
2

active

oldest

votes

You can add an index to duplicate option in datalist. So you should loop through options and in loop select any option in datalist has same value and add index to value attribute of it.

$("datalist option").each(function(){

  var sameOpt = $(this).parent().find("[value='"+this.value+"']:gt(0)");

  sameOpt.val(function(i, val){

    return val+'-'+(sameOpt.index(this)+2);

  }); 

});

$("datalist option").each(function(){

  var sameOpt = $(this).parent().find("[value='"+this.value+"']:gt(0)");

  sameOpt.val(function(i, val){

    return val+'-'+(sameOpt.index(this)+2);

  }); 

});



$("#my-input").change(function(){

  var v = $("#data-list option[value='"+this.value+"']").attr('data-id');

  console.log(v);

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="my-input" list="data-list">

<datalist id="data-list">

  <option value="John" data-id="1"></option>

  <option value="George" data-id="2"></option>

  <option value="John" data-id="3"></option>

  <option value="George" data-id="4"></option>

  <option value="John" data-id="5"></option>

</datalist>

answered Nov 26 '18 at 4:00

Mohammad

15.8k123664

Thanks. It seems to be good. I will try it :D

– andrei bozdoro
Nov 26 '18 at 4:40

Can I ask the purpose of adding 2 to the index, rather than just using the index? In (sameOpt.index(this)+2)

– CertainPerformance
Nov 27 '18 at 2:06

@CertainPerformance .index() return number from 0 but i need from 2

– Mohammad
Nov 27 '18 at 7:40

add a comment |

I think that is just the wrong element for your case. If you want the user to pick an item, you should try a select element. There are lots of solutions for that available.

With that said, you could use the label attribute for the names, and have unambiguous values in value:

<option label="John" value="1"></option>

<option label="George" value="2"></option>

<option label="John" value="3"></option>

That would present all the options for the user, but the actual value they would see after selecting a John would be either 1 or 3, and not John.

answered Nov 26 '18 at 4:39

Hugo Silva

4,91211533

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53474089%2fhow-to-detect-selected-option-in-datalist-when-has-duplicate-option%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

You can add an index to duplicate option in datalist. So you should loop through options and in loop select any option in datalist has same value and add index to value attribute of it.

$("datalist option").each(function(){

  var sameOpt = $(this).parent().find("[value='"+this.value+"']:gt(0)");

  sameOpt.val(function(i, val){

    return val+'-'+(sameOpt.index(this)+2);

  }); 

});

$("datalist option").each(function(){

  var sameOpt = $(this).parent().find("[value='"+this.value+"']:gt(0)");

  sameOpt.val(function(i, val){

    return val+'-'+(sameOpt.index(this)+2);

  }); 

});



$("#my-input").change(function(){

  var v = $("#data-list option[value='"+this.value+"']").attr('data-id');

  console.log(v);

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="my-input" list="data-list">

<datalist id="data-list">

  <option value="John" data-id="1"></option>

  <option value="George" data-id="2"></option>

  <option value="John" data-id="3"></option>

  <option value="George" data-id="4"></option>

  <option value="John" data-id="5"></option>

</datalist>

answered Nov 26 '18 at 4:00

Mohammad

15.8k123664

Thanks. It seems to be good. I will try it :D

– andrei bozdoro
Nov 26 '18 at 4:40

Can I ask the purpose of adding 2 to the index, rather than just using the index? In (sameOpt.index(this)+2)

– CertainPerformance
Nov 27 '18 at 2:06

@CertainPerformance .index() return number from 0 but i need from 2

– Mohammad
Nov 27 '18 at 7:40

add a comment |

You can add an index to duplicate option in datalist. So you should loop through options and in loop select any option in datalist has same value and add index to value attribute of it.

$("datalist option").each(function(){

  var sameOpt = $(this).parent().find("[value='"+this.value+"']:gt(0)");

  sameOpt.val(function(i, val){

    return val+'-'+(sameOpt.index(this)+2);

  }); 

});

$("datalist option").each(function(){

  var sameOpt = $(this).parent().find("[value='"+this.value+"']:gt(0)");

  sameOpt.val(function(i, val){

    return val+'-'+(sameOpt.index(this)+2);

  }); 

});



$("#my-input").change(function(){

  var v = $("#data-list option[value='"+this.value+"']").attr('data-id');

  console.log(v);

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="my-input" list="data-list">

<datalist id="data-list">

  <option value="John" data-id="1"></option>

  <option value="George" data-id="2"></option>

  <option value="John" data-id="3"></option>

  <option value="George" data-id="4"></option>

  <option value="John" data-id="5"></option>

</datalist>

answered Nov 26 '18 at 4:00

Mohammad

15.8k123664

Thanks. It seems to be good. I will try it :D

– andrei bozdoro
Nov 26 '18 at 4:40

Can I ask the purpose of adding 2 to the index, rather than just using the index? In (sameOpt.index(this)+2)

– CertainPerformance
Nov 27 '18 at 2:06

@CertainPerformance .index() return number from 0 but i need from 2

– Mohammad
Nov 27 '18 at 7:40

add a comment |

You can add an index to duplicate option in datalist. So you should loop through options and in loop select any option in datalist has same value and add index to value attribute of it.

$("datalist option").each(function(){

  var sameOpt = $(this).parent().find("[value='"+this.value+"']:gt(0)");

  sameOpt.val(function(i, val){

    return val+'-'+(sameOpt.index(this)+2);

  }); 

});

$("datalist option").each(function(){

  var sameOpt = $(this).parent().find("[value='"+this.value+"']:gt(0)");

  sameOpt.val(function(i, val){

    return val+'-'+(sameOpt.index(this)+2);

  }); 

});



$("#my-input").change(function(){

  var v = $("#data-list option[value='"+this.value+"']").attr('data-id');

  console.log(v);

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="my-input" list="data-list">

<datalist id="data-list">

  <option value="John" data-id="1"></option>

  <option value="George" data-id="2"></option>

  <option value="John" data-id="3"></option>

  <option value="George" data-id="4"></option>

  <option value="John" data-id="5"></option>

</datalist>

answered Nov 26 '18 at 4:00

Mohammad

15.8k123664

You can add an index to duplicate option in datalist. So you should loop through options and in loop select any option in datalist has same value and add index to value attribute of it.

$("datalist option").each(function(){

  var sameOpt = $(this).parent().find("[value='"+this.value+"']:gt(0)");

  sameOpt.val(function(i, val){

    return val+'-'+(sameOpt.index(this)+2);

  }); 

});

$("datalist option").each(function(){

  var sameOpt = $(this).parent().find("[value='"+this.value+"']:gt(0)");

  sameOpt.val(function(i, val){

    return val+'-'+(sameOpt.index(this)+2);

  }); 

});



$("#my-input").change(function(){

  var v = $("#data-list option[value='"+this.value+"']").attr('data-id');

  console.log(v);

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="my-input" list="data-list">

<datalist id="data-list">

  <option value="John" data-id="1"></option>

  <option value="George" data-id="2"></option>

  <option value="John" data-id="3"></option>

  <option value="George" data-id="4"></option>

  <option value="John" data-id="5"></option>

</datalist>

$("datalist option").each(function(){

  var sameOpt = $(this).parent().find("[value='"+this.value+"']:gt(0)");

  sameOpt.val(function(i, val){

    return val+'-'+(sameOpt.index(this)+2);

  }); 

});



$("#my-input").change(function(){

  var v = $("#data-list option[value='"+this.value+"']").attr('data-id');

  console.log(v);

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="my-input" list="data-list">

<datalist id="data-list">

  <option value="John" data-id="1"></option>

  <option value="George" data-id="2"></option>

  <option value="John" data-id="3"></option>

  <option value="George" data-id="4"></option>

  <option value="John" data-id="5"></option>

</datalist>

$("datalist option").each(function(){

  var sameOpt = $(this).parent().find("[value='"+this.value+"']:gt(0)");

  sameOpt.val(function(i, val){

    return val+'-'+(sameOpt.index(this)+2);

  }); 

});



$("#my-input").change(function(){

  var v = $("#data-list option[value='"+this.value+"']").attr('data-id');

  console.log(v);

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="my-input" list="data-list">

<datalist id="data-list">

  <option value="John" data-id="1"></option>

  <option value="George" data-id="2"></option>

  <option value="John" data-id="3"></option>

  <option value="George" data-id="4"></option>

  <option value="John" data-id="5"></option>

</datalist>

answered Nov 26 '18 at 4:00

Mohammad

15.8k123664

answered Nov 26 '18 at 4:00

Mohammad

15.8k123664

answered Nov 26 '18 at 4:00

Mohammad

15.8k123664

answered Nov 26 '18 at 4:00

Mohammad

15.8k123664

Thanks. It seems to be good. I will try it :D

– andrei bozdoro
Nov 26 '18 at 4:40

Can I ask the purpose of adding 2 to the index, rather than just using the index? In (sameOpt.index(this)+2)

– CertainPerformance
Nov 27 '18 at 2:06

@CertainPerformance .index() return number from 0 but i need from 2

– Mohammad
Nov 27 '18 at 7:40

add a comment |

Thanks. It seems to be good. I will try it :D

– andrei bozdoro
Nov 26 '18 at 4:40

Can I ask the purpose of adding 2 to the index, rather than just using the index? In (sameOpt.index(this)+2)

– CertainPerformance
Nov 27 '18 at 2:06

@CertainPerformance .index() return number from 0 but i need from 2

– Mohammad
Nov 27 '18 at 7:40

Thanks. It seems to be good. I will try it :D

– andrei bozdoro
Nov 26 '18 at 4:40

Can I ask the purpose of adding 2 to the index, rather than just using the index? In (sameOpt.index(this)+2)

– CertainPerformance
Nov 27 '18 at 2:06

@CertainPerformance .index() return number from 0 but i need from 2

– Mohammad
Nov 27 '18 at 7:40

add a comment |

I think that is just the wrong element for your case. If you want the user to pick an item, you should try a select element. There are lots of solutions for that available.

With that said, you could use the label attribute for the names, and have unambiguous values in value:

<option label="John" value="1"></option>

<option label="George" value="2"></option>

<option label="John" value="3"></option>

That would present all the options for the user, but the actual value they would see after selecting a John would be either 1 or 3, and not John.

answered Nov 26 '18 at 4:39

Hugo Silva

4,91211533

add a comment |

I think that is just the wrong element for your case. If you want the user to pick an item, you should try a select element. There are lots of solutions for that available.

With that said, you could use the label attribute for the names, and have unambiguous values in value:

<option label="John" value="1"></option>

<option label="George" value="2"></option>

<option label="John" value="3"></option>

That would present all the options for the user, but the actual value they would see after selecting a John would be either 1 or 3, and not John.

answered Nov 26 '18 at 4:39

Hugo Silva

4,91211533

add a comment |

I think that is just the wrong element for your case. If you want the user to pick an item, you should try a select element. There are lots of solutions for that available.

With that said, you could use the label attribute for the names, and have unambiguous values in value:

<option label="John" value="1"></option>

<option label="George" value="2"></option>

<option label="John" value="3"></option>

That would present all the options for the user, but the actual value they would see after selecting a John would be either 1 or 3, and not John.

answered Nov 26 '18 at 4:39

Hugo Silva

4,91211533

I think that is just the wrong element for your case. If you want the user to pick an item, you should try a select element. There are lots of solutions for that available.

With that said, you could use the label attribute for the names, and have unambiguous values in value:

<option label="John" value="1"></option>

<option label="George" value="2"></option>

<option label="John" value="3"></option>

That would present all the options for the user, but the actual value they would see after selecting a John would be either 1 or 3, and not John.

answered Nov 26 '18 at 4:39

Hugo Silva

4,91211533

answered Nov 26 '18 at 4:39

Hugo Silva

4,91211533

answered Nov 26 '18 at 4:39

Hugo Silva

4,91211533

answered Nov 26 '18 at 4:39

Hugo Silva

4,91211533

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Tukukkk