jQueryでどのように前のオプションを選択しますか？

私はこのような選択要素とhtmlページを持っている：jQueryでどのように前のオプションを選択しますか？

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>JS Bin</title> 
</head> 
<body> 
<select id="ExSelect"> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
    <option>4</option> 
    <option>5</option> 
    <option>6</option> 
    <option>7</option> 
    <option>8</option> 
    <option>9</option> 
    <option>10</option> 
</select> 
    <br> 
    <br> 
<script src="https://code.jquery.com/jquery-3.1.0.js"></script> 
    <button onclick="ToTheNext()" id="btnext">Next</button> 
</body> 
</html>

そして、私はドロップダウンリストの次のオプション項目に選択した項目を変更するには、ボタンクリック時に、この単純な関数を使用しています：

function ToTheNext() 
{ 
    $('#ExSelect option:selected').next().attr('selected', 'selected'); 
}

私の質問は：Vanilla JavaScriptまたはjQueryを使用して、選択したアイテムをこのタグの前のオプションに変更するにはどうすればよいですか？

Jsbin例：https://jsbin.com/nuyeduf/edit?html,js,output

出典

2017-09-29 Pv-Viana

@ToniMichelCaubetはちょうど 'ではなく「次の（）' –

を使用'selected'、 'selected'）の代わりに.attr（ 'selected'、true）を使用します。 PV-ヴィアナ\t @私は今、非常にダムを感じている – Nicholas

と.prop（ 'の' PREV（）を使用して、言ったようにちょうど 'PREV（）'の代わりに '次の（）' –

2つの問題 - 最初attrを使用することにより、あなたはそれがあなたのように働くからprev()を停止しますと何をしたいのか、おそらくされていない、選択に複数のオプションを設定しています期待する。あなたはjQueryのを使用している場合onclick属性の使用を停止し、代わりに適切

$('#btnext').on('click', function(){ 
    $('#ExSelect option:selected').next().prop('selected', true); 
});

$(function(){ 
 

 
    $('#btnext').on('click',function(){ 
 
    $('#ExSelect option:selected').next().prop('selected', true); 
 
    }); 
 

 
    $('#btprev').on('click',function(){ 
 
    $('#ExSelect option:selected').prev().prop('selected', true); 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="ExSelect"> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    <option>3</option> 
 
    <option>4</option> 
 
    <option>5</option> 
 
    <option>6</option> 
 
    <option>7</option> 
 
    <option>8</option> 
 
    <option>9</option> 
 
    <option>10</option> 
 
</select> 
 
    <br> 
 
    <br> 
 
    <button id="btnext">Next</button> 
 
    <button id="btprev">Prev</button>

をクリックハンドラを割り当て、その後

function ToTheNext() 
{ 
    $('#ExSelect option:selected').next().prop('selected', true); 
} 

function ToThePrevious() 
{ 
    $('#ExSelect option:selected').prev().prop('selected', true); 
}

https://jsbin.com/xewopobasi/1/edit?html,js,output

：

は、このようにコードを変更し

出典

2017-09-29 12:55:35 Jamiec

この例では、onclick属性のみを使用しました。非常に良い答えをありがとう！ –

はprev()

で.prop('selected', true);

next()で.attr('selected', 'selected');を交換し、ボタンの下jQueryスクリプトを追加します。

const select = $('#ExSelect'); 
 

 
function next() 
 
{ 
 
    select.find('option:selected').next().prop('selected', true); 
 
} 
 

 
function prev() 
 
{ 
 
    select.find('option:selected').prev().prop('selected', true); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="ExSelect"> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    <option>3</option> 
 
    <option>4</option> 
 
    <option>5</option> 
 
    <option>6</option> 
 
    <option>7</option> 
 
    <option>8</option> 
 
    <option>9</option> 
 
    <option>10</option> 
 
</select> 
 
<button onclick="next()" id="btnext">Next</button> 
 
<button onclick="prev()" id="btprev">Prev</button>

出典

2017-09-29 12:52:48

はたぶん、あなたは '小道具（）'意味ですか？ –

いいえ、 'prev'はattr''習慣作業手段を用いて最初に一致し、以前のを見つけ。 – Jamiec

使用$('#ExSelect option:selected').prev().prop('selected', true);

出典

2017-09-29 13:19:16 RETZZ

jQueryでどのように前のオプションを選択しますか？

答えて

関連する問題