Làm cách nào để tôi lập trình đặt giá trị của phần tử hộp chọn bằng JavaScript?

Tôi có <select>yếu tố HTML sau :

<select id="leaveCode" name="leaveCode">
  <option value="10">Annual Leave</option>
  <option value="11">Medical Leave</option>
  <option value="14">Long Service</option>
  <option value="17">Leave Without Pay</option>
</select>

Sử dụng hàm JavaScript với leaveCodesố làm tham số, làm cách nào để chọn tùy chọn phù hợp trong danh sách?

Bạn có thể sử dụng chức năng này:

selectElement('leaveCode', '11')

function selectElement(id, valueToSelect) {    
    let element = document.getElementById(id);
    element.value = valueToSelect;
}

Nếu bạn đang sử dụng jQuery, bạn cũng có thể làm điều này:

$('#leaveCode').val('14');

Điều này sẽ chọn <option>với giá trị 14.

Với Javascript đơn giản, điều này cũng có thể đạt được bằng hai Documentphương pháp :

• Với document.querySelector, bạn có thể chọn một yếu tố dựa trên bộ chọn CSS:

  document.querySelector('#leaveCode').value = '14'

• Sử dụng cách tiếp cận được thiết lập nhiều hơn với document.getElementById(), như tên của hàm ngụ ý, cho phép bạn chọn một phần tử dựa trên id:

  document.getElementById('leaveCode').value = '14'

Bạn có thể chạy đoạn mã dưới đây để xem các phương thức này và hàm jQuery hoạt động:

const jQueryFunction = () => {
  
  $('#leaveCode').val('14'); 
  
}

const querySelectorFunction = () => {
  
  document.querySelector('#leaveCode').value = '14' 
  
}

const getElementByIdFunction = () => {
  
  document.getElementById('leaveCode').value='14' 
  
}

input {
  display:block;
  margin: 10px;
  padding: 10px
}

<select id="leaveCode" name="leaveCode">
  <option value="10">Annual Leave</option>
  <option value="11">Medical Leave</option>
  <option value="14">Long Service</option>
  <option value="17">Leave Without Pay</option>
</select>

<input type="button" value="$('#leaveCode').val('14');" onclick="jQueryFunction()" />
<input type="button" value="document.querySelector('#leaveCode').value = '14'" onclick="querySelectorFunction()" />
<input type="button" value="document.getElementById('leaveCode').value = '14'" onclick="getElementByIdFunction()" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

function setSelectValue (id, val) {
    document.getElementById(id).value = val;
}
setSelectValue('leaveCode', 14);

Không trả lời câu hỏi, nhưng bạn cũng có thể chọn theo chỉ mục, trong đó i là chỉ mục của mục bạn muốn chọn:

var formObj = document.getElementById('myForm');
formObj.leaveCode[i].selected = true;

Bạn cũng có thể lặp qua các mục để chọn theo giá trị hiển thị bằng một vòng lặp:

for (var i = 0, len < formObj.leaveCode.length; i < len; i++) 
    if (formObj.leaveCode[i].value == 'xxx') formObj.leaveCode[i].selected = true;

Tôi đã so sánh các phương pháp khác nhau:

So sánh các cách khác nhau về cách đặt giá trị của lựa chọn với JS hoặc jQuery

mã:

$(function() {
    var oldT = new Date().getTime();
     var element = document.getElementById('myId');
    element.value = 4;
    console.error(new Date().getTime() - oldT);

    oldT = new Date().getTime();
    $("#myId option").filter(function() {
        return $(this).attr('value') == 4;
    }).attr('selected', true);
    console.error(new Date().getTime() - oldT);

    oldT = new Date().getTime();
    $("#myId").val("4");
    console.error(new Date().getTime() - oldT);
});

Đầu ra trên một lựa chọn với ~ 4000 yếu tố:

• 1 ms
• 58 ms
• 612 ms

Với Firefox 10. Lưu ý: Lý do duy nhất tôi thực hiện thử nghiệm này là do jQuery hoạt động rất kém trong danh sách của chúng tôi với ~ 2000 mục (chúng có các văn bản dài hơn giữa các tùy chọn). Chúng tôi đã có khoảng 2 giây chậm trễ sau một val ()

Cũng lưu ý: Tôi đang đặt giá trị tùy thuộc vào giá trị thực chứ không phải giá trị văn bản.

document.getElementById('leaveCode').value = '10';

Điều đó sẽ đặt lựa chọn thành "Nghỉ phép hàng năm"

Tôi đã thử các giải pháp dựa trên JavaScript / jQuery ở trên, chẳng hạn như:

$("#leaveCode").val("14");

và

var leaveCode = document.querySelector('#leaveCode');
leaveCode[i].selected = true;

trong ứng dụng AngularJS, nơi có phần tử <select> bắt buộc .

Không ai trong số họ hoạt động, vì xác thực mẫu AngularJS không được kích hoạt. Mặc dù tùy chọn đúng đã được chọn (và được hiển thị trong biểu mẫu), đầu vào vẫn không hợp lệ (các lớp ng-pristine và ng-không hợp lệ vẫn còn).

Để buộc xác thực AngularJS, hãy gọi jQuery change () sau khi chọn một tùy chọn:

$("#leaveCode").val("14").change();

và

var leaveCode = document.querySelector('#leaveCode');
leaveCode[i].selected = true;
$(leaveCode).change();

function foo(value)
{
    var e = document.getElementById('leaveCode');
    if(e) e.value = value;
}

Cách dễ nhất nếu bạn cần:
1) Nhấp vào nút xác định tùy chọn chọn
2) Chuyển đến trang khác, trong đó tùy chọn chọn là
3) Có giá trị tùy chọn đó được chọn trên trang khác

1) liên kết nút của bạn (giả sử, trên trang chủ)

<a onclick="location.href='contact.php?option=1';" style="cursor:pointer;">Sales</a>
<a onclick="location.href='contact.php?option=2';" style="cursor:pointer;">IT</a>

(trong đó contact.php là trang của bạn với các tùy chọn được chọn. Lưu ý url trang có? tùy chọn = 1 hoặc 2)

2) đặt mã này trên trang thứ hai của bạn (trường hợp của tôi contact.php )

<?
if (isset($_GET['option']) && $_GET['option'] != "") {
$pg = $_GET['option'];              
} ?>

3) làm cho giá trị tùy chọn được chọn, tùy thuộc vào nút được nhấp

<select>
<option value="Sales" <? if ($pg == '1') { echo "selected"; } ?> >Sales</option>
<option value="IT" <? if ($pg == '2') { echo "selected"; } ?> >IT</option>
</select>

.. và như thế.
Vì vậy, đây là một cách dễ dàng để chuyển giá trị sang một trang khác (với danh sách tùy chọn chọn) thông qua GET trong url. Không có hình thức, không có ID .. chỉ cần 3 bước và nó hoạt động hoàn hảo.

Tại sao không thêm một biến cho Id của phần tử và biến nó thành hàm có thể sử dụng lại?

function SelectElement(selectElementId, valueToSelect)
{    
    var element = document.getElementById(selectElementId);
    element.value = valueToSelect;
}

Giả sử biểu mẫu của bạn được đặt tên là form1 :

function selectValue(val)
{
  var lc = document.form1.leaveCode;
  for (i=0; i<lc.length; i++)
  {
    if (lc.options[i].value == val)
    {
        lc.selectedIndex = i;
        return;
    }
  }
}

Nên là một cái gì đó dọc theo những dòng này:

function setValue(inVal){
var dl = document.getElementById('leaveCode');
var el =0;
for (var i=0; i<dl.options.length; i++){
  if (dl.options[i].value == inVal){
    el=i;
    break;
  }
}
dl.selectedIndex = el;
}

function selecetElement() {
 var selectedValue = document.getElementById('leaveCode');
 selectedValue.value = "11";
}

Nếu sử dụng PHP, bạn có thể thử một cái gì đó như thế này:

$value = '11';
$first = '';
$second = '';
$third = '';
$fourth = '';

switch($value) {
            case '10' :
                $first = 'selected';
            break;
            case '11' :
                $second = 'selected';
            break;
            case '14' :
                $third = 'selected';
            break;
            case '17' :
                $fourth = 'selected';
            break;
        }

echo'
<select id="leaveCode" name="leaveCode">
  <option value="10" '. $first .'>Annual Leave</option>
  <option value="11" '. $second .'>Medical Leave</option>
  <option value="14" '. $third .'>Long Service</option>
  <option value="17" '. $fourth .'>Leave Without Pay</option>
</select>';

Bạn rất có thể muốn điều này:

$("._statusDDL").val('2');

HOẶC LÀ

$('select').prop('selectedIndex', 3); 

Tôi sợ rằng tôi không thể kiểm tra điều này vào lúc này, nhưng trong quá khứ, tôi tin rằng tôi phải cung cấp cho mỗi thẻ tùy chọn một ID, và sau đó tôi đã làm một cái gì đó như:

document.getElementById("optionID").select();

Nếu điều đó không hiệu quả, có thể nó sẽ giúp bạn tiến gần hơn đến một giải pháp: P