Using Jquery for "select" and "option"?

Question

The first to thank everyone for helping me. Sorry for my english is bad :)

1. I need jquery, can take the option is selected for display in a div.I need to get the value at the site loaded. And if I choose another option it remains unchanged.

Ex, I have :

<div class="example">
<select name="filter1" onchange="filtch1(this,'http://example.com/abc/19','0','1');">
<option value="0">Example</option>
<option value="1">Example 1</option>
<option value="2">Example 2</option>
<option value="3" selected>Example 3</option>
</select>
</div>

<div class="demo"></div>

And Result:

<div class="example">
<select name="filter1" onchange="filtch1(this,'http://example.com/abc/19','0','1');">
<option value="0">Example</option>
<option value="1">Example 1</option>
<option value="2">Example 2</option>
<option value="3" selected>Example 3</option>
</select>
</div>

<div class="demo">Example 3</div>

2. And how I can remove the edges of the option. I tried using css but can not be !

Thanks for visit and help me !

This will help you to remove the edges http://stackoverflow.com/questions/14639638/how-to-remove-border-of-drop-down-list-css — Gopalakrishnan, Feb 29 '16 at 10:32

score 2 · Answer 1 · edited May 23 '17 at 11:53

2

Try to bind a change event to your select element and inside of that assign the value of it to the target div,

$(".example select[name=filter1]").change(function(){
  $(this).closest(".example").next(".demo").text($(":selected", this).text());
  //If you want to access the selected value then just use this.value
});

DEMO

And for your second problem, this question may help.

edited May 23 '17 at 11:53

Community

1
1

answered Feb 29 '16 at 10:26

Rajaprabhu Aravindasamy

66,513
17
101
130

There are mistakes in my question. I used your code and add ".change ();'"to auto execute on page load auto but it is a continuous loading page. I've revised the hoi.Mong you help me again? Thank you. https://jsfiddle.net/auLoeoq8/ – LeTung Feb 29 '16 at 11:23

score 1 · Accepted Answer · answered Feb 29 '16 at 10:27

In change event of select[name=filter1] get the selected option's text and set it to .demo.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="example">
    <select name="filter1">
        <option value="0">Example</option>
        <option value="1">Example 1</option>
        <option value="2">Example 2</option>
        <option value="3" selected>Example 3</option>
    </select>
</div>

<div class="demo">Selected Here</div>

<script>
    $('select[name=filter1]').change(function() {
        $('.demo').html($('option:selected', this).text());
    }).change(); //auto execute on page load
</script>

Thanks for helping me. But my question made a mistake. So when using your code, it occurs continuously load the page. I've edited the question. Wish you help me again? — LeTung, Feb 29 '16 at 11:10

score 0 · Answer 3 · answered Feb 29 '16 at 10:28

0

In an dropdown on change function do this

also add an id to your dropdown

$( "#id" ).change(function() {
      // add another id to your result div and then
('#divId').text(this.text());
}

answered Feb 29 '16 at 10:28

REDEVI_

684
8
18

Using Jquery for "select" and "option"?

3 Answers3

DEMO