アンカーを含む480px未満の選択ボックスにリストを変換

thisのようなカスタム選択ボックスを実装する必要があります。どうすれば下のコードでそれに変換できますか？ここに私の現在の作業事前にfiddle アンカーを含む480px未満の選択ボックスにリストを変換

 
 
<body> 
 
<div class="i-home-left"> 
 

 
<ul id="make-select-box"> 
 
    <li><a href="#i-bc"> 1 </a></li> 
 
    <li><a href="#i-st"> 2 </a></li> 
 
    <li><a href="#i-mm"> 3 </a></li> 
 
    <li><a href="#i-cc"> 4 </a></li> 
 
</ul> 
 

 
</div> 
 
<div id="i-bc">some content here </div> 
 
<div id="i-st">some content here </div> 
 
<div id="i-mm">some content here </div> 
 
<div id="i-cc">some content here </div> 
 
</body>

おかげです。

Fiddle

出典

2016-12-12 Immran Mohammed

私はここでstackoverflowに新しいですjs fiddle：https://jsfiddle.net/vh4y426f/ –

これは私にとっては非常に便利ですが、私はこのリンクが必要ですs。 http://jsfiddle.net/4y2wD/ –

昨日私はこの問題を解決しました –

HTML：

<span id='selected_val'></span> 
<ul id="make-select-box" > 
    <li><a href="#i-bc" onClick='toggleDropDown(1)'> 1 </a></li> 
    <li><a href="#i-st" onClick='toggleDropDown(2)'> 2 </a></li> 
    <li><a href="#i-mm" onClick='toggleDropDown(3)'> 3 </a></li> 
    <li><a href="#i-cc" onClick='toggleDropDown(4)'> 4 </a></li> 
</ul>

JS：

var selectval; 
function renderDropDown(){ 
    $('#make-select-box').css('display', 'none'); 
    if(selectVal == undefined){ 
    document.getElementById('selected_val').innerHTML = 1; 
    } 
} 
renderDropDown()

トグルドロップダウン

var selectval 
function toggleDropDown(arg){ 
    selectVal = arg; 
    document.getElementById('selected_val').innerHTML = arg; 
    $('#make-select-box').toggle(); 

}

出典

2016-12-12 06:14:37

あなたの努力のおかげでありがとう、私はulを$（ウィンドウ）.width（）<480から選択ボックスに変換したい、私はタグ内のonclickイベントは私に別の結果を与えると思います。もう一度あなたの応答に感謝します。 –

あなたはこれらのfiddlesをチェックしてください。現在の謎：https://jsfiddle.net/vh4y426f/と非常に役に立つフィドルhttp://jsfiddle.net/4y2wD/ –

あなたは選択ボックスとしてulを設計する必要がありますが、機能実装 –

あなたがこれを行うことができるため、ここではそれは大きな上で一覧が表示されますスクリーンをd小さな画面の場合は、選択ボックスに切り替えます。 CSSで

<ul id="make-select-box"> 
    <li><a href="#i-bc"> 1 </a></li> 
    <li><a href="#i-st"> 2 </a></li> 
    <li><a href="#i-mm"> 3 </a></li> 
    <li><a href="#i-cc"> 4 </a></li> 
    </ul> 

    <select class="toggle-view"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    </select>

.toggle-view { 
     display : block; 
    } 
    #make-select-box { 
     display : none; 
    } 

    @media screen and (min-width: 480px) { 
    .toggle-view { 
     display : none; 
     } 
    #make-select-box { 
     display : block; 
     } 
    }

それともあなたはjavascriptの（動的）でこれを行うにしたい場合は、その後、あなたは、コードの下に使用することができ、

var sel = $('<select id="tesing2"/>'); 
    onResize = function() { 
    if($(window).width() < 480) { 
     $('#make-select-box li').each(function(){ 
     sel.append('<option value='$(this).children('a').attr('href')'>'+this.innerHTML+'</option>') 
     }) 
     $('#make-select-box').replaceWith(sel); 
    } 
    $('select').on('change', function() { 
    var url = this.value; 
    window.location = this.value; 
    }) 

    } 

    $(document).ready(onResize)

運のベスト:)

出典

2016-12-16 07:18:56

オプションが選択されているとき、同じページ内の特定のIDに移動していないとき。 –

ありがとう、私は以前このコードを試してみました。その値を持つボックスを選択するにはリチウムを変換するが、私は非常に感謝する可能性があります解決することができれば、どこかにonselectイベントやgotoのようなものが必要です。 –

@ImmranMohammedあなたのために私のjavascriptのコードを編集しました、あなたは今あなたがurlにリダイレクトするwindow.locationの代わりに他のオプションを試すことができます。 –

アンカーを含む480px未満の選択ボックスにリストを変換

答えて

関連する問題