I'm developing an script that using nice select :

<div class="nice-select form-control "   tabindex="0"><span class="current">تعداد حمام</span>
    <ul class="list" >
        <li data-value="1" class="option selected focus">1 حمام</li>
        <li data-value="2" class="option">2 حمام</li>
        <li data-value="3" class="option">3 حمام</li>
        <li data-value="4" class="option">4 حمام</li>
    </ul>
</div>

I check the documention and it have just two method:

$('select').niceSelect('update');

$('select').niceSelect('destroy');

It didn't say how to get the selected value , i google it too but anyway i couldn't get the selected value and another point is that i have more than one nice select in one page

How can i handle it?

Edited: Thanks @jorge-fuentes-gonzález and this is the snippet/fiddle , can you help to get the selected value?

I'm developing an script that using nice select :

<div class="nice-select form-control "   tabindex="0"><span class="current">تعداد حمام</span>
    <ul class="list" >
        <li data-value="1" class="option selected focus">1 حمام</li>
        <li data-value="2" class="option">2 حمام</li>
        <li data-value="3" class="option">3 حمام</li>
        <li data-value="4" class="option">4 حمام</li>
    </ul>
</div>

I check the documention and it have just two method:

$('select').niceSelect('update');

$('select').niceSelect('destroy');

It didn't say how to get the selected value , i google it too but anyway i couldn't get the selected value and another point is that i have more than one nice select in one page

How can i handle it?

Edited: Thanks @jorge-fuentes-gonzález and this is the snippet/fiddle , can you help to get the selected value?

• javascript
• jquery

Share Improve this question Follow edited Dec 20, 2019 at 9:27 Mehdi asked Dec 20, 2019 at 9:04 MehdiMehdi 48811 gold badge77 silver badges3030 bronze badges 13

• why you are not using <select> tags? – Zeljka Commented Dec 20, 2019 at 9:06
• @Zeljka Because they are using nice select... – Martin Commented Dec 20, 2019 at 9:07
• 1 @Martin check nice select documentation.. he should use select tags – Zeljka Commented Dec 20, 2019 at 9:08
• Maybe try $('select').val() I recall most jQuery plugins to return values this way. – Keff Commented Dec 20, 2019 at 9:08
• @Zeljka I presume they are using that and the output is what has been pasted into the question – Martin Commented Dec 20, 2019 at 9:09

 |  Show 8 more ments

1 Answer 1

Sorted by: Reset to default 5

You have incorrect HTML. As you can see in the documentation, you have to create a normal HTML <select>, like this:

<select id="myselect">
  <option data-display="Select">Nothing</option>
  <option value="1">Some option</option>
  <option value="2">Another option</option>
  <option value="3" disabled>A disabled option</option>
  <option value="4">Potato</option>
</select>

Then pass to it the niceSelect plugin:

$("#myselect").niceSelect();

And you will be able to get the value using simple JavaScript over your <select> tag:

var selected = $("#myselect").val();

niceSelect plugin is simply a wrapper. Creates HTML over your <select> HTML, but your <select> HTML still exists on the page, but hidden, and you can continue working with it:

BUT you need to use <select> tags, not <ul><li> tags. I don't know where you got your code, but documentation is your friend. I've updated your fiddle here: https://jsfiddle/o7a4dtwv/