Как добавить значения в скрытое поле?

Question

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

для например:

hidden_field_name= count_select; 

    select_box_name = select1; 

как добавляется динамически, когда пользователь нажимает кнопку "Добавить". Теперь я хочу сохранить выбранный элемент select1 в count_select для каждого экземпляра.

Но когда я использую метод val(), он записывает общее количество кликов в значение count_select.

Вот код:

Html код:

function getCount() { 
 
    top.count = $("select.container_countable option:selected[value!='']").length; 
 
    $('.countable').val(top.count); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type='hidden' class='countable' id='count_containerfilter' name='countable_cont' value=0> 
 
<select onclick='getCount()' class='container_countable' multiple='multiple' name='new_containerfilter'>

Любая идея, почему это происходит?

Answer 1

Основываясь на вашем this comment above:

, что я хочу достичь, это: select_box = 2 пункт выбран, вновь добавленные select box = 3 элемента выбрано, поэтому, наконец, count_select должен содержать count_select = [2, 3] ....

Вы можете использовать массив для отслеживания выбора. После этого либо присвойте этот массив непосредственно hiddeninput, либо stringify и назначьте строку.

Смотрите этот фрагмент:

var tmp = []; 
 
$("select.countable").on("change", function() { 
 
    tmp = []; 
 
    $("select.countable").each(function() { 
 
     var ctr = $(this).find("option:selected").length; 
 
     tmp.push(ctr); 
 
    }); 
 
    $("#ctr").val(JSON.stringify(tmp)); 
 
    $("#result").text($("#ctr").val()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type='hidden' id='ctr' /> 
 
<hr/> 
 
<select class="countable" multiple> 
 
    <option value="1">One</option> 
 
    <option value="2">Two</option> 
 
    <option value="3">Three</option> 
 
    <option value="4">Four</option> 
 
</select> 
 
<select class="countable" multiple> 
 
    <option value="1">One</option> 
 
    <option value="2">Two</option> 
 
    <option value="3">Three</option> 
 
    <option value="4">Four</option> 
 
</select> 
 
<hr/> 
 
<p id="result"></p>

Вот скрипка для Вас, чтобы играть: http://jsfiddle.net/abhitalks/f6o3ped8/1/

Попробуйте добавить еще select с и посмотреть результат.

.

Answer 2

This code is from jQuery docs for :selected (с небольшими изменениями):

$("select") 
 
    .change(function() { 
 
    var count = $("select option:selected").length; // Count selected 
 
    $("input").val(count);       // Update field 
 
    }) 
 
    .trigger("change");        // Trigger at least once

select{ 
 
    height:100px; 
 
    width:100px; 
 
}

<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
 

 
<select name="garden" multiple="multiple"> 
 
    <option>Flowers</option> 
 
    <option>Shrubs</option> 
 
    <option>Trees</option> 
 
    <option selected="selected">Bushes</option> 
 
    <option>Grass</option> 
 
    <option selected="selected">Dirt</option> 
 
</select> 
 
<input />