2009-05-02 30 views
32

Mới đối với javascript, nhưng tôi chắc chắn điều này thật dễ dàng. Thật không may, hầu hết các kết quả của google không hữu ích.Javascript để đặt giá trị biểu mẫu ẩn khi thả xuống thay đổi

Dù sao, tôi muốn đặt giá trị của phần tử biểu mẫu ẩn thông qua javascript khi lựa chọn thả xuống thay đổi.

Tôi có thể sử dụng jQuery, nếu nó đơn giản hơn để nhận hoặc đặt giá trị.

+0

là "câu trả lời mới đã được đăng lên" dường như đã thất bại trên tất cả chúng ta, lol –

Trả lời

62

Nếu bạn có HTML như thế này, ví dụ:

<select id='myselect'> 
    <option value='1'>A</option> 
    <option value='2'>B</option> 
    <option value='3'>C</option> 
    <option value='4'>D</option> 
</select> 
<input type='hidden' id='myhidden' value=''> 

Tất cả bạn phải làm là bind a function to the change event of the select, và làm những gì bạn cần có:

<script type='text/javascript'> 
$(function() { 
    $('#myselect').change(function() { 
     // if changed to, for example, the last option, then 
     // $(this).find('option:selected').text() == D 
     // $(this).val() == 4 
     // get whatever value you want into a variable 
     var x = $(this).val(); 
     // and update the hidden input's value 
     $('#myhidden').val(x); 
    }); 
}); 
</script> 

Tất cả những điều được xem xét, nếu bạn định làm nhiều chương trình jQuery, hãy luôn mở phần mở rộng documentation. Nó rất dễ dàng để tìm thấy những gì bạn cần có nếu bạn cho nó một cơ hội.

3

Ở đây bạn có thể thiết lập giá trị ẩn tại sự kiện onchange của danh sách thả xuống:

$('#myDropDown').bind('change', function() { 
    $('#myHidden').val('setted value'); 
}); 

ẩn và danh sách thả xuống của bạn:

<input type="hidden" id="myHidden" /> 

<select id="myDropDown"> 
    <option value="opt 1">Option 1</option> 
    <option value="opt 2">Option 2</option> 
    <option value="opt 3">Option 3</option> 
</ select> 
2

Đây là với jQuery.

$('#selectFormElement').change(function() { 
    $('#hiddenFormElement').val('newValue'); 
}); 

Trong html

<select id="selectFormElement" name="..."> ... </select> 
<input type="hidden" name="..." id="hiddenFormElement" /> 
2

Chỉ cần để thể khác nhau, thay đổi câu trả lời của tôi vì vậy mà câu hỏi này không có câu trả lời 5 với cùng mã.

<html> 
<head> 
    <title>Page</title> 
    <script src="jquery-1.3.2.min.js"></script> 
    <script> 
     $(function() { 
      var select = $("body").append('<form></form>').children('form') 
       .append('<input type="hidden" value="" />').children('input[type=hidden]') 
       .attr('id', 'hiddenValue').end() 
       .append('<select></select>').children('select') 
       .attr('id', 'dropdown') 
       .change(function() { 
        alert($(this).val()); 
       }); 

      $.each({ one: 1, two: 2, three: 3, four: 4, five: 5 }, function(txt, val) { 
       select.append('<option value="' + val + '">' + txt + '</option>'); 
      }); 
     }); 
</script> 
</head> 
    <body></body> 
</html> 
1
<form> 
    <input type="hidden" name="selval"> 
    <select onchange="this.form.selval.value=this.selectedIndex"> 
    <option>val1</option> 
    <option>val2</option> 
    </select> 
</form> 

tinh khiết javascript từ bên trong một hình thức

+0

Tôi đã theo ấn tượng rằng việc sử dụng "this.form.elementName" đã phản đối ủng hộ "document.getElementById ('xx ') " ... – ChristianLinnell

+0

phụ thuộc vào tình huống – Jim

10

Plain cũ Javascript:

<script type="text/javascript"> 

function changeHiddenInput (objDropDown) 
{ 
    var objHidden = document.getElementById("hiddenInput"); 
    objHidden.value = objDropDown.value; 
} 

</script> 
<form> 
    <select id="dropdown" name="dropdown" onchange="changeHiddenInput(this)"> 
     <option value="1">One</option> 
     <option value="2">Two</option> 
     <option value="3">Three</option> 
    </select> 

    <input type="hidden" name="hiddenInput" id="hiddenInput" value="" /> 
</form> 
+0

Tôi mới tham gia trò chơi - liệu' onchange' có được cho phép theo chính sách bảo mật nội dung không? – selig

8

tôi đã chiến đấu với điều này một thời gian dài $('#myelement').val(x) chỉ là không làm việc ... cho đến khi tôi nhận ra Việc xây dựng # yêu cầu ID, không phải là NAME. Vì vậy, nếu ".val(x) không hoạt động!" là vấn đề của bạn, hãy kiểm tra phần tử của bạn và chắc chắn rằng nó có một ID!

Thật đáng xấu hổ, nhưng tôi cảm thấy mình phải chia sẻ để cứu người khác nhiều tóc rách.

+1

Rất tiếc ... Chỉ có cùng một vấn đề! – KingCronus

0
$(function() { 
$('#myselect').change(function() { 
    $('#myhidden').val =$("#myselect option:selected").text(); 
    }); 
}); 
Các vấn đề liên quan