Значение по умолчанию в выпадающем меню (JavaScript)

Question

Я хочу установить значение по умолчанию в выпадающем меню на среднее (а не первое).

Я использую выпадающие списки на своем сайте для посетителей, чтобы выбрать один из трех/четырех/пяти размеров продукта.

Код JavaScript является:

$(document).ready(function() { 
    $('.group').hide(); 
    $('#option1').show(); 
    $('#selectMe').change(function() { 
     $('.group').hide(); 
     $('#'+$(this).val()).show(); 
    }) 
}); 

Другой код:

<select id="selectMe"> 
    <option value="option1">S</option> 
    <option value="option2">M</option> 
    <option value="option3">L</option> 
</select> 

Пользователь выбирает значение, а затем изменяется соответствующим образом кнопку Купить. Таким образом, ...

<div> 
    <div id="option1" class="group">Button for size S</div> 
    <div id="option2" class="group">Button for size M</div> 
    <div id="option3" class="group">Button for size L</div> 
</div> 

Это прекрасно работает, но в данном случае, я хочу M быть по умолчанию, а не S (есть три размера здесь, но иногда больше).

Answer 1

Просто используйте следующие фрагменты:

1. С JQuery

   $(document).ready(function() { 
    
       var $select = $('#selectMe'); 
    
   
    
       $select.val("option2");//initial value 
    
       $("[id=" + $select.val() + "]").show() 
    
        .siblings().hide(); 
    
   
    
       $select.change(function() { 
    
        $("[id=" + $select.val() + "]").show() 
    
         .siblings().hide(); 
    
       }); 
    
   });

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
    
   <select id="selectMe"> 
    
        <option value="option1">S</option> 
    
        <option value="option2">M</option> 
    
        <option value="option3">L</option> 
    
       </select> 
    
   
    
       <div> 
    
        <div id="option1" class="group">Button for size S</div> 
    
        <div id="option2" class="group">Button for size M</div> 
    
        <div id="option3" class="group">Button for size L</div> 
    
       </div>

2. Или, Вы можете сделать это с помощью чистого JavaScript

   var selectBox = document.getElementById("selectMe") 
    
   selectBox.selectedIndex = parseInt(selectBox.length/2); 
    
   
    
   selectBox.onchange = function() { 
    
       changeButton(this.value); 
    
   } 
    
   
    
   changeButton(selectBox.value); 
    
   
    
   function changeButton(val) { 
    
       console.log(val) 
    
       var i = -1, elements = document.querySelectorAll('[class=group]'); 
    
       while (elements[++i]) { 
    
        console.log(elements[i]); 
    
        elements[i].style.display = (elements[i].id == val) ? "block" : "none"; 
    
       } 
    
   }

   <select id="selectMe"> 
    
       <option value="option1">S</option> 
    
       <option value="option2">M</option> 
    
       <option value="option3">L</option> 
    
   </select> 
    
   
    
   <div> 
    
       <div id="option1" class="group">Button for size S</div> 
    
       <div id="option2" class="group">Button for size M</div> 
    
       <div id="option3" class="group">Button for size L</div> 
    
   </div>

Answer 2

Почему бы вам не сделать selected?

<option value="option2" selected>M</option> 

Answer 3

У вас есть 3 варианта

1.Using HTML selected свойств для выбора нужного параметра.

<select id="selectMe"> 
    <option value="option1">S</option> 
    <option value="option2" selected>M</option> 
    <option value="option3">L</option> 
</select> 

2.Using JQuery

$('#selectMe').val('option2') 

3.Использование чистый JS

document.getElementById('selectMe').value = 'option2'; 

Answer 4

Попробуйте это:

var options = $('#selectMe option'); 
var total = options.length + ((options.length % 2 == 0) ? 0 : -1); 
var value = $(options[total/2]).val(); 
$('#selectMe').val(value); 

Answer 5

Попробуйте с одной кнопкой:

HTML:

<select id="selectMe"> 
<option value="option1">S</option> 
<option value="option2">M</option> 
<option value="option3">L</option> 
</select> 
... 
<div> 
<div id="button-size" class="group">Button for size S</div> 
</div> 

JQuery:

var options = $('#selectMe option'); 
var total = options.length + ((options.length % 2 == 0) ? 0 : -1); 
var value = $(options[total/2]).val(); 
$('#selectMe').val(value); 
changeButtonLabel(value); 

$('#selectMe').on('change', function (evt) 
{ 
    var value = $(this).val(); 
    changeButtonLabel(value); 
}); 

function changeButtonLabel(value) 
{ 
$('#button-size').html('Button for size ' + $('#selectMe').find('option[value=' + value + ']').html()); 
}