Have any events select element can dispatch to pop options?

Question

I need click a div to pop the options in the event. My code are as followed.

<div class="value" @click.native="onClick">
    <select v-if="mode=='select'" ref="selectNative">
        <option value="volvo">one</option>
        <option value="saab">two</option>
        <option value="mercedes">three</option>
    </select>
</div>

I use Vue get Dom element by ref and bind onClick on div

this.$refs.selectNative.dispatchEvent(new MouseEvent('click', { 'bubbles': false }));

but it doesn't work.

I want to get options when click the div.

Possible duplicate of [Is it possible to use JS to open an HTML select to show its option list?](https://stackoverflow.com/questions/430237/is-it-possible-to-use-js-to-open-an-html-select-to-show-its-option-list) — Jacob Goh, Mar 19 '18 at 03:52

score 0 · Answer 1 · answered Mar 19 '18 at 03:20

0

You should try MouseEvent instead of simple 'Event'

answered Mar 19 '18 at 03:20

QaMar ALi

229
2
12

Thanks for your help. I tried it but it doesn't work. – RichardSleet Mar 19 '18 at 03:31

acdcjunior · Answer 2 · 2018-03-19T03:41:29.087

0

Why not add the @click to the <select> and use @click="onClick($event.currentTarget)"?

<div class="value" @click="onClick($refs.selectNative)">
    <select v-if="mode=='select'" ref="selectNative" @click="onClick($event.currentTarget)">
        <option value="volvo">one</option>
        <option value="saab">two</option>
        <option value="mercedes">three</option>
    </select>
</div>

edited Mar 19 '18 at 03:41

answered Mar 19 '18 at 03:30

acdcjunior

132,397
37
331
304

Thanks.And I want to the result that when you have clicked the div area just like you have clicked the select element. – RichardSleet Mar 19 '18 at 03:37
See `@click="onClick($refs.selectNative)"` in the updated answer. – acdcjunior Mar 19 '18 at 03:41

Have any events select element can dispatch to pop options?

2 Answers2