[Solved]How do I get the data-id value from a select?


#1

Im trying to get the data-id value from a select.

If I use the first then I can get the value, but how to get the data-id?

 var skola = $$('select[name=skola]').val() // this gets the right value
 var userId = $$('select[name=skola]').data('id'); //this is not working...

  <select id="skola" class="skola" name="skola">            
        
            <option value="">Select a school</option>
            <option value="lindblomskolan" data-id="1">Lindblomskolan</option>
            <option value="skolappen" data-id="2">Skolappen</option>
						 		
  </select>

I have tried sooooooo many different variations, but no luck haha…

Somebody pleeeease help!


#2

<select id=“skola” class=“skola” name=“skola” data-id=“0”>

        <option value="">Select a school</option>
        <option value="lindblomskolan" data-id="1">Lindblomskolan</option>
        <option value="skolappen" data-id="2">Skolappen</option>	

var userId = $$(‘select[name=skola]’).data(‘id’); // userid=“0”

if you want to get the data-id from the selected option ,may you can try
var options= $(‘select[name=skola]’).find(‘option:selected’).data(‘id’);
but when using $$ ,it doesn’t work!:confused:

AND why not make good use of VALUE as it’s meant to?


#3

Thanks but, It does´t work for me.
And if only $ works for you then you must have jQuery as well I guess?
I have tested all jQuery examples I have found with $$ but nothing is working, all I get is this error.

SyntaxError (DOM Exception 12): The string did not match the expected pattern.

Well I simply need to get more than one value from the select, both from the value and the data-id!


#4

yes. i have both jqurey and f7.
i think the problem is that f7 didn’t define the selector “:selected”

maybe you can try
1.set the value as a object;
2.after getting the value do another match.

var skola = $$(‘select[name=skola]’).val();
var userid = $$(‘option[value=’+ skola +’]’).data(‘id’)


#5

Hi @Manmade,

If don’t want to user jQuery then try plain javascript like below

var element = document.getElementById(‘policyType’);
console.log(element.options[ element.selectedIndex ].getAttribute(‘data-id’))


#6

Hi, thanks to you both, I will try, but there must be a framework7 way to do it!?


#7

The correct native selector for this is :checked so just:

$('select option:checked').attr('data-id');

#8

Thank you so much, it worked!