Simple Custom Select Box with jQuery

Question

I found this really great solution for a simple custom select box - it works beautifully however it only works for one select box. I've been tinkering with it for the past 2 or 3 hours and I can't for life of me figuring it out so that it works for all custom selects.

The issue is this line of code is very specific - I need it to output text that should be unique to the select box that it's being applied to

 $(".out").text(str);

Here is the code in it's entirety:

$('select[name=Listing_Price_Max]').change(function () {
    var str = "";
    str = $(this).find(":selected").text();
    $(".out").text(str);
}).trigger('change');

Credit to Sanddip for his helpful solution https://stackoverflow.com/a/16145673/1108360 - I just need to get a little more out of it. Any help would be much appreciated, thanks!

Can you post the HTML that goes with this and a jsFiddle.net example? — j08691, Jun 12 '13 at 19:02

score 3 · Accepted Answer · edited Feb 02 '23 at 19:56

3

You may want to do it this way:

 $(this).next(".out").text(str); //Select the div that is next to the selectBox

provided your structure is like this:

<div class="selectdiv">
    <select class="selectboxdiv">
        <option>choose preset...</option>
        <option>two</option>
        <option>something</option>
        <option>4</option>
        <option>5</option>
    </select>
    <div class="out">XCZXCzxcxz</div>
</div>

Demo

See .next()

edited Feb 02 '23 at 19:56

Bart Az.

1,644
1
22
32

answered Jun 12 '13 at 19:05

PSL

123,204
21
253
243

you beated me for 1 minute :D – BeNdErR Jun 12 '13 at 19:07

score 0 · Answer 2 · answered Aug 12 '13 at 05:37

If you want to create custom selectbox using jquery. You can do this without using any third party large sized plugin.

You can theme it using small css code.

I found this link very useful to create custom select box using jquery

http://www.codeinsects.com/stylize-your-select-box-using-jquery-custom-plugin.html

Simple Custom Select Box with jQuery

2 Answers2

Demo