使用Javascript來設置隱藏的表單值的下拉變化

JavaScript新手，但我相信這很容易。不幸的是，大部分谷歌搜索結果都沒有幫助。使用Javascript來設置隱藏的表單值的下拉變化

無論如何，我想在下拉選擇更改時通過javascript設置隱藏表單元素的值。

我可以使用jQuery，如果它可以更簡單地獲取或設置值。

2009-05-02 jerhinesmith

「新答案已張貼」似乎已經失敗了我們所有人，笑 – 2009-05-02 21:46:27

如果你有HTML這樣的，例如：

<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=''>

所有你需要做的就是bind a function to the change event of the select，做你需要的任何東西：

<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>

所有的事情考慮，如果你要做很多jQuery編程，總是打開documentation。如果你給它一個機會，很容易找到你需要的東西。

來源

2009-05-02 21:45:27

在這裏，您可以在下拉列表的onchange事件設置隱藏的價值：

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

你的隱藏和下拉列表：

<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>

來源

2009-05-02 21:42:19 Canavar

這是使用jQuery。

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

在HTML

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

來源

2009-05-02 21:43:41

只要是不同的，改變了我的回答使這個問題沒有答案，5使用相同的代碼。

<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>

來源

2009-05-02 21:45:04

<form> 
    <input type="hidden" name="selval"> 
    <select onchange="this.form.selval.value=this.selectedIndex"> 
    <option>val1</option> 
    <option>val2</option> 
    </select> 
</form>

從表單中

來源

2009-05-02 21:47:22 Jim

我的印象是，使用「this.form.elementName」贊成的document.getElementById的「被棄用（「XX '）「 ... – ChristianLinnell 2009-05-02 22:31:09

取決於具體情況 – Jim 2009-05-02 22:38:02

普通老式的Javascript純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>

來源

2009-05-02 21:47:55

我是新來的遊戲 - 內容安全策略允許`onchange`嗎？ – selig 2013-07-24 14:36:46

我會打這個很長一段時間$('#myelement').val(x)只是不工作...直到我意識到#建設需要一個ID，而不是名稱。所以如果「.val(x)不起作用！」是你的問題，檢查你的元素，並確保它有一個ID！

這是一個令人尷尬的陷阱，但我覺得我必須分享以挽救別人多的頭髮撕裂。

來源

2011-08-24 14:24:22 Redboots

$(function() { 
$('#myselect').change(function() { 
    $('#myhidden').val =$("#myselect option:selected").text(); 
    }); 
});

來源

2013-07-27 01:26:12

使用Javascript來設置隱藏的表單值的下拉變化

回答

相關問題