Javascript для установки скрытого значения формы при выпадающем меню - PullRequest
Новая
       7

Javascript для установки скрытого значения формы при выпадающем меню

32 голосов
/ 03 мая 2009

Впервые в JavaScript, но я уверен, что это легко. К сожалению, большинство результатов Google не помогло.

В любом случае, я хочу установить значение скрытого элемента формы через javascript при изменении выпадающего списка.

Я могу использовать jQuery, если это упрощает получение или установку значений.

Ответы [ 8 ]

66 голосов
/ 03 мая 2009

Если у вас есть такой 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=''>

Все, что вам нужно сделать, это привязать функцию к событию change выбора и сделать то, что вам нужно: 

<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, всегда открывайте документацию . Там очень легко найти то, что вам нужно, если вы дадите ему шанс.

10 голосов
/ 03 мая 2009

Простой старый 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>
8 голосов
/ 24 августа 2011

Я долго с этим боролся $('#myelement').val(x) просто не работал ... пока я не понял, что конструкция # требует ИД, а не ИМЯ. Так что, если ".val(x) не работает!" это ваша проблема, проверьте ваш элемент и убедитесь, что у него есть идентификатор!

Это неловко, но я чувствовал, что должен был поделиться, чтобы спасти других от слез.

3 голосов
/ 03 мая 2009

Здесь вы можете установить значение hidden в событии 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>
2 голосов
/ 03 мая 2009

Просто чтобы измениться, измените мой ответ, чтобы на этот вопрос не было 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>
2 голосов
/ 03 мая 2009

Это с jQuery. 

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

В HTML 

<select id="selectFormElement" name="..."> ... </select>
<input type="hidden" name="..." id="hiddenFormElement" />
1 голос
/ 03 мая 2009 
<form>
  <input type="hidden" name="selval">
  <select onchange="this.form.selval.value=this.selectedIndex">
    <option>val1</option>
    <option>val2</option>
  </select>
</form>

чистый javascript из формы

0 голосов
/ 27 июля 2013 
$(function() {
$('#myselect').change(function() {
   $('#myhidden').val =$("#myselect option:selected").text();
    });
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...