JQuery динамический выбор не передает значения - PullRequest
Новая
       13

JQuery динамический выбор не передает значения

1 голос
/ 29 марта 2010

ВНОВЬ РЕДАКТИРОВАТЬ ... Я просто дурачок и разобрался!

РЕДАКТИРОВАТЬ: похоже, если я выделю все в поле выбора цели и нажму «Добавить выбранное», он отправит ... Как исправить это поведение в приведенном ниже коде, чтобы вы нужно нажать кнопку «Добавить выбранное», чтобы заставить его работать?

У меня есть форма, которая включает три поля выбора. Первый - это категории, и при выборе категории из него в поле множественного выбора переменных будут указаны значения, характерные для выбранной категории. Выбор переменных и затем нажатие «добавить выбранное» заполнит поле выбора цели этими переменными. Проблема в том, что print_r показывает, что значения в поле выбора цели не передаются при отправке, и я не понимаю, почему ... Ниже приведен код, и помощь действительно приветствуется

Вот HTML-разметка: 

<select multiple="" id="categories" name="categories[]">
   <option class="category" value="Income">Income</option>
   <option class="category" value="Gender">Gender</option>
   <option class="category" value="Age">Age</option>
</select>

// обратите внимание, что я показываю только переменные для предположительно выбранной категории 

<select multiple="multiple" id="variables" name="variables[]">
  <option value="2">Less Than $15,000</option>
  <option value="3">$15,000 - $19,999</option>
  <option value="4">$20,000 - $29,999</option>
  <option value="5">$30,000 - $39,999</option>
  <option value="6">$40,000 - $49,999</option>
  <option value="11">$90,000 - $99,999</option>
  <option value="12">$100,000 - $124,999</option>
  <option value="13">$125,000 - $149,999</option>
  <option value="14">Greater than $149,999</option>
</select>

<select name="target[]" id="target" multiple="multiple" height="60">
</select>

А вот код jquery: 

$(function(){
 var  opts    = {}, 
      $cats   = $("#categories"), 
      $target = $("#target"),
      $vars   = $("#variables");

 $vars.find("option").each(function(){
     var $opt  = $(this),
         cat   = this.className,
         value = this.value,
         label = $opt.text();

     if(!opts[cat]) { opts[cat] = []; }

     opts[cat].push({label: label, value: value});

     $opt.remove();
 });

 function update_variables(){
     var cat = $cats.val(), new_opts = [];
     $vars.empty();

     $.each(opts[cat], function(){
       if( $target.find('[value=' + this.value + ']').length === 0 ){
         new_opts.push(option(this.value, this.label));
       }
     });

     $vars.html(new_opts.join(''));
 }

 function option(value, label){
   return "<option value='" + value + "'>" + label + "</option>";
 }

 $("#add").click(function(e){
   e.preventDefault();
   $vars.find(':selected').appendTo($target).attr('selected',false);
   update_variables();
 });

 $("#remove").click(function(e){
   e.preventDefault();
   $target.find(':selected').remove();
   update_variables();
 });

 $cats.change(function(){
   update_variables();
 }).change();
})

1 Ответ

0 голосов
/ 29 марта 2010

Я не вижу весь ваш код, так что простите, если я укажу на что-то очевидное.

Когда вы отправляете форму, все элементы в окне выбора «target» должны быть «выбраны». В противном случае браузер не отправит их в запросе.

Вы можете выполнить этот выбор в методе отправки формы. Как то так: 

$('#formid').submit(function() {
    $("#target").find('option').attr('selected',true);
});

Надеюсь, это поможет

...