需要在移动设备上使用复选框将多选框改为多选

时间:2015-11-09 21:08:43

标签: javascript html css media-queries multi-select

我的JSFiddle位于此处,显示了一些可滚动的多选框。有没有办法可以在使用媒体查询@media屏幕和(max-device-width:767px)时更改这些框以在移动设备上具有复选框功能{所以我仍然可以使用多选功能?谢谢!

<section class="gallery-search">
<div class="grid-50 mobile-grid-100 gallery-search-left">
     <h2>NASCAR PHOTO GALLERY SEARCH</h2>

    <!--<p>SIMPLY USE THE DROP BOXES BELOW TO FILTER YOUR SEARCH RESULTS</p>-->
</div>
<div class="grid-50 mobile-grid-100 gallery-search-right">
    <p>Select one or more attributes to match.
        <br />Hold down Control key and click to select multiple items.</p>
</div>
<div class="grid-100 mobile-grid-100 gallery-search-selections">
    <div class="grid-33 mobile-grid-100 search-block1"> <span class="search-select-title">Driver</span>

        <select multiple size="2">
            <option value='133'>AJ Allmendinger</option>
            <option value='161'>Alan Kulwicki</option>
            <option value='112'>Aric Almirola</option>
            <option value='147'>Austin Dillon</option>
            <option value='162'>Bill Elliott</option>
            <option value='163'>Bobby Allison</option>
            <option value='129'>Bobby Labonte</option>
            <option value='103'>Brad Keselowski</option>
            <option value='160'>Brian Keselowski</option>
            <option value='145'>Brian Vickers</option>
            <option value='164'>Cale Yarborogh</option>
            <option value='104'>Carl Edwards</option>
            <option value='120'>Casey Mears</option>
            <option value='107'>Clint Bowyer</option>
            <option value='159'>Cole Whitt</option>
            <option value='165'>Dale Earnhardt</option>
            <option value='105'>Dale Earnhardt Jr</option>
            <option value='166'>Dale Jarrett</option>
            <option value='125'>Danica Patrick</option>
            <option value='167'>Dario Franchitti</option>
            <option value='168'>Darrell Waltrip</option>
            <option value='127'>Dave Blaney</option>
            <option value='169'>Davey Allison</option>
            <option value='132'>David Gilliland</option>
            <option value='170'>David Pearson</option>
            <option value='130'>David Ragan</option>
            <option value='131'>David Reutimann</option>
            <option value='134'>David Stremme</option>
            <option value='124'>Denny Hamlin</option>
            <option value='158'>Elliott Sadler</option>
            <option value='102'>Greg Biffle</option>
            <option value='128'>J.J. Yeley</option>
            <option value='171'>Jacques Villeneuve</option>
            <option value='111'>Jamie McMurray</option>
            <option value='157'>Jason Leffler</option>
            <option value='122'>Jeff Burton</option>
            <option value='114'>Jeff Gordon</option>
            <option value='172'>Jeremy Mayfield</option>
            <option value='100'>Jimmie Johnson</option>
            <option value='149'>Joe Nemechek</option>
            <option value='113'>Joey Logano</option>
            <option value='173'>John Andretti</option>
            <option value='148'>Josh Wise</option>
            <option value='126'>Juan Pablo Montoya</option>
            <option value='106'>Kasey Kahne</option>
            <option value='140'>Ken Schrader</option>
            <option value='110'>Kevin Harvick</option>
            <option value='174'>Kevin Lepage</option>
            <option value='123'>Kurt Busch</option>
            <option value='101'>Kyle Busch</option>
            <option value='175'>Kyle Petty</option>
            <option value='136'>Landon Cassill</option>
            <option value='116'>Marcos Ambrose</option>
            <option value='117'>Mark Martin</option>
            <option value='118'>Martin Truex Jr</option>
            <option value='109'>Matt Kenseth</option>
            <option value='137'>Michael McDowell</option>
            <option value='141'>Michael Waltrip</option>
            <option value='150'>Mike Bliss</option>
            <option value='177'>Patrck Carpentier</option>
            <option value='108'>Paul Menard</option>
            <option value='178'>R.J. Allmendinger</option>
            <option value='156'>Reed Sorenson</option>
            <option value='144'>Regan Smith</option>
            <option value='179'>Richard Petty</option>
            <option value='119'>Ricky Stenhouse Jr</option>
            <option value='180'>Robby Gordon</option>
            <option value='155'>Robert Richardson</option>
            <option value='181'>Rusty Wallace</option>
            <option value='115'>Ryan Newman</option>
            <option value='154'>Sam Hornish Jr</option>
            <option value='143'>Scott Riggs</option>
            <option value='139'>Scott Speed</option>
            <option value='153'>Stephen Leicht</option>
            <option value='152'>T.J. Bell</option>
            <option value='138'>Terry Labonte</option>
            <option value='142'>Timmy Hill</option>
            <option value='182'>Todd Bodine</option>
            <option value='151'>Tony Raines</option>
            <option value='121'>Tony Stewart</option>
            <option value='135'>Travis Kvapil</option>
            <option value='146'>Trevor Bayne</option>
        </select> <span class="search-select-title">Track</span>

        <select multiple size="2">
            <option value='300'>Atlanta Motor Speedway</option>
            <option value='301'>Auto Club Speedway</option>
            <option value='302'>Bristol Motor Speedway</option>
            <option value='303'>Charlotte Motor Speedway</option>
            <option value='304'>Chicagoland Speedway</option>
            <option value='305'>Darlington Raceway</option>
            <option value='306'>Daytona International Speedway</option>
            <option value='307'>Dover International Speedway</option>
            <option value='308'>Homestead-Miami Speedway</option>
            <option value='309'>Indianapolis Motor Speedway</option>
            <option value='310'>Kansas Speedway</option>
            <option value='311'>Kentucky Speedway</option>
            <option value='312'>Las Vegas Motor Speedway</option>
            <option value='313'>Martinsville Speedway</option>
            <option value='314'>Michigan International Speedway</option>
            <option value='315'>New Hampshire Motor Speedway</option>
            <option value='316'>Phoenix International Raceway</option>
            <option value='317'>Pocono Raceway</option>
            <option value='318'>Richmond International Raceway</option>
            <option value='319'>Sonoma Raceway</option>
            <option value='320'>Talladega Superspeedway</option>
            <option value='321'>Texas Motor Speedway</option>
            <option value='322'>Watkins Glen International</option>
        </select>
    </div>
    <div class="grid-33 mobile-grid-100 search-block2"> <span class="search-select-title">Make</span>

        <select multiple size="2">
            <option value="volvo">Chevy</option>
            <option value="volvo">Ford</option>
            <option value="volvo">Dodge</option>
            <option value="volvo">Toyota</option>
        </select> <span class="search-select-title">Team</span>

        <select multiple size="2">
            <option value='74'>BK Racing</option>
            <option value='87'>Brian Keselowski Racing</option>
            <option value='77'>Circle Sport</option>
            <option value='66'>Earnhardt Ganassi Racing</option>
            <option value='79'>FAS Lane Racing</option>
            <option value='73'>Front Row Motorsports</option>
            <option value='70'>Furniture Row Racing</option>
            <option value='69'>Germain Racing</option>
            <option value='60'>Hendrick Motorsports</option>
            <option value='84'>Humphrey Smith Racing</option>
            <option value='72'>JTG Daugherty Racing</option>
            <option value='61'>Joe Gibbs Racing</option>
            <option value='80'>Leavine Family Racing</option>
            <option value='85'>Make Motorsports</option>
            <option value='64'>Michael Waltrip Racing</option>
            <option value='83'>NEMCO Motorsports</option>
            <option value='63'>Penske Racing</option>
            <option value='78'>Phil Parsons Racing</option>
            <option value='75'>Phoenix Racing</option>
            <option value='65'>Richard Childress Racing</option>
            <option value='67'>Richard Petty Motorsports</option>
            <option value='62'>Roush Fenway Racing</option>
            <option value='68'>Stewart-Haas Racing</option>
            <option value='76'>Swan Racing</option>
            <option value='86'>The Motorsports Group</option>
            <option value='71'>Tommy Baldwin Racing</option>
            <option value='82'>Wood Brothers Racing</option>
            <option value='81'>XXXtreme Motorsport</option>
        </select>
    </div>
    <div class="grid-33 mobile-grid-100 search-block3"> <span class="search-select-title">Year</span>

        <select multiple size="2">
            <option value='46'>2015</option>
            <option value='45'>2014</option>
            <option value='44'>2013</option>
            <option value='43'>2012</option>
            <option value='42'>2011</option>
            <option value='41'>2010</option>
            <option value='40'>2009</option>
            <option value='39'>2008</option>
            <option value='38'>2007</option>
            <option value='37'>2006</option>
            <option value='36'>2005</option>
            <option value='35'>2004</option>
            <option value='34'>2003</option>
            <option value='33'>2002</option>
            <option value='32'>2001</option>
            <option value='31'>2000</option>
            <option value='30'>1999</option>
            <option value='29'>1998</option>
            <option value='28'>1997</option>
            <option value='27'>1996</option>
            <option value='26'>1995</option>
            <option value='25'>1994</option>
            <option value='24'>1993</option>
            <option value='23'>1992</option>
            <option value='22'>1991</option>
            <option value='21'>1990</option>
            <option value='20'>1989</option>
            <option value='19'>1988</option>
            <option value='18'>1987</option>
            <option value='17'>1986</option>
            <option value='16'>1985</option>
            <option value='15'>1984</option>
            <option value='14'>1983</option>
            <option value='13'>1982</option>
            <option value='12'>1981</option>
        </select> <span class="search-select-title">Collection</span>

        <select multiple size="2">
            <option value="volvo">Collection</option>
            <option value="volvo">Drivers</option>
            <option value="volvo">Cars</option>
            <option value="volvo">Tracks</option>
        </select>
    </div>
</div>
<div class="grid-100 mobile-grid-100 gallery-search-tags">
    <p>User Tags</p>
    <input type=text name="usertags" value="">
</div>
<input type="button" value="SEARCH PHOTO DATABASE">

0 个答案:

没有答案