I put that div on select to reduce the width not the size , right now I use
this jquery which works
$(document).ready(function(){
$('#program').wrap("<div class='wrapper'></div>");
$('.wrapper').after("<div class='selectArrow'/>");
$('.wrapper').find('select').mousedown(function(){
$(this).parent().next().addClass('selectArrow-mousedown').removeClass('selectArrow-mouseover');
}).
mouseup(function(){
$(this).parent().next().removeClass('selectArrow-mousedown').addClass('selectArrow-mouseover');
}).
hover(function(){
$(this).parent().next().addClass('selectArrow-mouseover');
}, function(){
$(this).parent().next().removeClass('selectArrow-mouseover');
});
$('.selectArrow').click(function(){
$(this).prev().find('select').focus();
});
$('.selectArrow').mousedown(function(){
$(this).addClass('selectArrow-mousedown').removeClass('selectArrow-mouseover');
}).
mouseup(function(){
$(this).removeClass('selectArrow-mousedown').addClass('selectArrow-mouseover');
}).
hover(function(){
$(this).addClass('selectArrow-mouseover');
}, function(){
$(this).removeClass('selectArrow-mouseover');
});
});
.wrapper{
display: inline;
float: left;
width: 180px;
overflow: hidden;
}
.selectArrow{
display: inline;
float: left;
width: 17px;
height: 22px;
border:1px solid #7f9db9;
border-left: none;
background: url('images/selectArrow.png') no-repeat 1px 1px;
}
.selectArrow-mousedown{background:
url('images/selectArrow-mousedown.png') no-repeat 1px 1px;}
.selectArrow-mouseover{background:
url('images/selectArrow-mouseover.png') no-repeat 1px 1px;}
this function puts the div
but if the user clicks on the selectArrow image drop down does not open ,
user has to click on the dropdown , please tell me if I can oprn the
dropdown when user clicks on the select-arrow image ?
MorningZ wrote:
>
> If there was an API for it, it would be on the docs page (http://
> docs.jquery.com), but in thinking what a <select> looks like when it's
> "open", it's easy to use some simple code to change the <select>'s
> "size" property (http://www.w3schools.com/TAGS/att_select_size.asp)
> from "1" to "# of children" and back again:
>
> (working) case in point:
>
> http://jsbin.com/iloqa/edit
>
>
> On Dec 26, 1:45 pm, fachhoch <fachh...@gmail.com> wrote:
>> My select drop down is inside a div , I am wondering if jquery has any
>> api
>> to open the dropdwon ,when user clicks on the div ?
>>
>> <div class="wrapper">
>> <select name="infGrantProgram" id="program"
>> wicket:id="infGrantProgram">
>> <option value="" selected="selected">Choose One</option>
>> <option value="114">AD - DEVELOPMENTAL DISABLITIES -
>> 94006</option>
>> <option value="372">ADDDDC - Developmental Disabilities
>> Councils -
>> 93630</option>
>> <option value="771">ADPTASST - Adoption Assistance -
>> 93659</option>
>> <option value="978">AE1 - Community Based Abstinence
>> Education -
>> 93010</option>
>> <option value="935">AEGP - Abstinence Education Grant
>> Program -
>> 93235</option>
>> <option value="815">ZV - ASSISTANCE FOR VICTIMS OF
>> TRAFFICKING -
>> 93598</option>
>> </select>
>> </div>
>>
>> --
>> View this message in
>> context:http://old.nabble.com/open-drodown-tp26929027s27240p26929027.html
>> Sent from the jQuery General Discussion mailing list archive at
>> Nabble.com.
>
>
--
View this message in context:
http://old.nabble.com/open-drodown-tp26929027s27240p26929490.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
