it-swarm-vi.tech

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ó phần tử HTML <select> 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 số leaveCode làm tham số, làm cách nào để tôi chọn tùy chọn phù hợp trong danh sách?

343
brasskazoo
SelectElement("leaveCode", valueToSelect)

function SelectElement(id, valueToSelect)
{    
    var element = document.getElementById(id);
    element.value = valueToSelect;
}
438
Mitchel Sellers

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ị là 14.


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

  • 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 idname__:

    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>
98
Einar Ólafsson
function setSelectValue (id, val) {
    document.getElementById(id).value = val;
}
setSelectValue('leaveCode', 14);
28
Andrew Hedges

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;
14
Chase Seibert

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 phần 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, không phải giá trị văn bản

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

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

9
William

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");

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

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

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ệ ( ng-pristine ng-không hợp lệ các lớp vẫn hiện diện).

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

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

var leaveCode = document.querySelector('#leaveCode');
leaveCode[i].selected = true;
$(leaveCode).change();
7
lumi77
[.__.] 
function foo(value)
{
    var e = document.getElementById('leaveCode');
    if(e) e.value = value;
}
 [.__.]
3
mmattax

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 một 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 của 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'];              
} ?>

) tạo 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ân vân.
[.__.] Vì vậy, đây là cách dễ dàng chuyển giá trị sang 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.

3
Lana

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;
}
1
Stephen Wrighton

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

function selectValue(val)
{
  var lc = document.form1.leaveCode;
  for (i=0; i&lt;lc.length; i++)
  {
    if (lc.options[i].value == val)
    {
        lc.selectedIndex = i;
        return;
    }
  }
}
1
Milan Babuškov

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;
}
1
Robert Swisher

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

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

OR

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