Truyền các trường nhập ẩn trong HTML Chọn tùy chọn

Question

Có ai biết nếu có thể chuyển thông số yêu cầu bị ẩn với yếu tố <select><option> dưới dạng HTML không? Ví dụ: nếu người dùng chọn <option value="foo">foo</option> từ danh sách tùy chọn <select>, tôi có thể chuyển giá trị ẩn vào, cũng như giá trị "foo" và truy xuất giá trị đó dưới dạng tham số yêu cầu không? Ví dụ. <input type="hidden" name="x" value="bar"/> sẽ cho phép tôi nhận các giá trị "foo" và "bar" từ yêu cầu khi người dùng đã chọn tùy chọn foo.

Cảm ơn

Answer 1

Danh sách chọn có cả giá trị được hiển thị cho người dùng và giá trị được chuyển trở lại máy chủ trong bài đăng biểu mẫu. Vì vậy, bạn có thể sử dụng một số loại delimiter trong giá trị được đưa lên có được cả hai giá trị được gửi trở lại và sau đó phân tích cho họ vào thời điểm đó:

 <select id="myselectlist" > 
      <option value="foo|bar">foo</option> 
      <option value="foo2|bar2">foo2</option> 
     </select> 

Nhưng tốt hơn nhưng sẽ là vượt qua trở lại một giá trị ID mà sau đó bạn có thể sử dụng để biết được mục được lựa chọn từ một cơ sở dữ liệu và cũng có thể sử dụng nó để tìm kiếm các tài liệu liên quan thứ hai:

 <select id="myselectlist" > 
      <option value="123">foo</option> 
      <option value="124">foo2</option> 
     </select> 

cơ sở dữ liệu của bạn có thể trông như thế này:

ID DisplayValue OtherData 
123 foo   bar  
124 foo2   bar2  

Answer 2

Có là hình thức đầu vào type='hidden' mà bạn có thể cập nhật bằng cách sử dụng sự kiện onchange của thả xuống chọn sau đó nó sẽ được đăng tải với biểu mẫu. Tôi nghi ngờ bạn sẽ muốn tạo một mảng các giá trị có thể cho đầu vào bị ẩn theo cùng thứ tự như các giá trị tương đương của chúng trong menu thả xuống và sau đó truy cập giá trị trong mảng theo chỉ mục bằng thuộc tính selectedIndex của phần tử chọn.

Answer 3

Dưới đây là một solu thay thế tion giả sử jQuery có sẵn. Nếu bạn sử dụng một thư viện tiện ích js khác với jQuery, hoặc không có thư viện nào cả, điều này vẫn có thể thực hiện được. Nó chỉ liên kết một hàm với sự kiện onchange của lựa chọn và phân tích cú pháp json từ một thuộc tính data-custom.

<form> 
<select name="AnySelect"> 
<option value="primary-value0" data-support='["test",128,2014,"blackberry"]' /> 
<option value="primary-value1" data-support='["test1",39,2013,"apricot"]' /> 
<option value="primary-value2" data-support='["test2",42,2012,"peach"]' /> 
<option value="primary-value3" data-support='[null,null]' /> 
<option value="primary-value4" data-support='[30,28,null]' /> 
</select> 
. 
. 
. 
<span style="visibility: hidden" id="Support_AnySelect-container"><span> 
</form> 

^ Markup ------- Javascript v

//bind onchange once document is loaded and ready 
$.ready(function(){ $('#TheSelector').on('change',UpdateHidden); }); 

function UpdateHidden(event) 
{ 
    //Create a base name for grouping dynamic values; ex: Support_AnySelect 
    Name='Support_'+SelectField.attr('name'); 

    //Check if container was made for us already 
    Contain=$(this.parent).find('#'+Name+'-container'); 

    if(Container.length===0) //make the container if missing 
    { 
    $(this).after('<span id="'+Name+'-container" style="visibility: none;"></span>'); 
    Contain=$(this.parent).children('#'+Name+'-container'); 
    } 

    //get our special multi-values, jQuery will auto decode the JSON 
    SupportValues = this.data('support'); 

    Contain.empty(); //get rid of last select options 
    $.each(SupportValues,function(i,val) 
    { 
    Contain.append('<input type="hidden" name="'+Name+'['+i+'] value="'+val+'"/>'); 
    }); 
} 

lợi ích chính của việc này là nó nên, về mặt lý thuyết, cho phép bạn gửi một 'số lượng biến của các biến 'từ biểu mẫu. Bạn cũng có thể điều chỉnh tập lệnh để tính toán các đối tượng lồng nhau nhất định. Miễn là bạn chuyển JSON hợp lệ đến thuộc tính dữ liệu mà bạn chọn.

Nếu có ai đó cố gắng làm điều này trước khi tôi làm, vui lòng cho tôi biết. Tôi sẽ kiểm tra điều này sau nhưng có thể có một số lỗi nhỏ. Bạn sẽ có thể sử dụng điều này trên bất kỳ phần tử chọn nào và có các đầu vào ẩn tự động điền vào bên trong một phần tử khác; tập lệnh cũng phải đảm bảo chúng nằm trong cùng một thẻ biểu mẫu cho bạn và có tên duy nhất nhưng được nhóm lại qua mảng HTTP.