2011-08-29 4 views
0

Im 콤보 선택 드롭 다운 옵션에 jquery 스크립트를 사용합니다. 스크립트는 선택한 옵션을 제출 한 후에 선택 항목으로 저장하지 않고 각 드롭 다운 목록의 첫 번째 값으로 다시 설정된다는 사실 외에도 잘 작동합니다.Jquery form select otion이 submit 후 저장되지 않습니다.

이 문제에 도움이 필요합니다. 내 기존 게시물이나 다른 대안 중 하나에 추가 할 수있는 솔루션이 있습니까?

두 개의 스크립트를 사용하여 하나는 듀얼 드롭을 선택하고 (한 드롭은 다른 드롭과 다릅니다) 다른 스크립트는 모든 옵션과 하위 옵션을 나열합니다. 여기

처음 스크립트 코드이다

$(document).ready(function() 
{ 

    var selectoptions = { 
      "Option 1": { 
       "key" : "Option 1", 
       "defaultvalue" : 1, 
       "values" : { 
        "sub-option 1": "sub-option 1", 
        "sub-option 2": "sub-option 2", 
        "sub-option 3": "sub-option 3" 

      } 
    }, 

"Option 2": { 
       "key" : "Option 1", 
       "defaultvalue" : 1, 
       "values" : { 
        "sub-option 1": "sub-option 1", 
        "sub-option 2": "sub-option 2", 
        "sub-option 3": "sub-option 3" 

      } 
    }, 

"Option 3": { 
       "key" : "Option 1", 
       "defaultvalue" : 1, 
       "values" : { 
        "sub-option 1": "sub-option 1", 
        "sub-option 2": "sub-option 2", 
        "sub-option 3": "sub-option 3" 

      } 
    }, 

}; 

     $('#first').doubleSelect('second', selectoptions); 

}); 

샘플 양식 HTML 임 사용된다 : 여기서

(function($) { 
    $.fn.doubleSelect = function(doubleid, values, options) { 

     options = $.extend({ 
      preselectFirst: null, 
      preselectSecond: null, 
      emptyOption: false, 
      emptyKey: -1, 
      emptyValue: 'Choose...' 
     }, 
     options || {}); 

     var $first = this; 
     var $secondid = "#" + doubleid; 
     var $second = $($secondid); 

     var setValue = function(value) { 
      $second.val(value).change(); 
     }; 

     /** Helper Function to remove childs from second */ 
     var removeValues = function() { 
      $($secondid + " option").remove(); 
     }; 

     /** OnChange Handler */ 
     $(this).change(function() { 
      removeValues(); 
      var $current = this.options[this.selectedIndex].value; 
      if ($current !== '') { 
       $.each(values, 
       function(k, v) { 
        var bestk; 
        if ($current == v.key) { 
         $.each(v.values, 
         function(k, v2) { 
          if (!bestk && (v.defaultvalue !== null && v2 == v.defaultvalue)) { 
           bestk = k; 
          } 
          if (options.preselectSecond !== null && v2 == options.preselectSecond) { 
           bestk = k; 
          } 
         }); 
         $.each(v.values, 
         function(k, v2) { 
          var o = $("<option>").html(k).attr('value', v2); 
          if (options.preselectSecond) { 
          $.each(options.preselectSecond, 
           function(index, selected) { 
           if (v2 == selected) { 
            o.html(k).attr("selected", "selected"); 
           } 
           } 
          ); 
          } 
          if (k === bestk) { o.html(k).attr("selected", "selected"); } 
          o.appendTo($second); 
         }); 
        } 
       }); 

      } else { 
       setValue(options.emptyValue); 
      } 
     }); 

     return this.each(function() { 

      //remove all current items in select boxes 
      $first.children().remove(); 
      $second.children().remove(); 

      // Handle the empty option param 
      if (options.emptyOption) { 
       var oe = $("<option>").html(options.emptyValue).attr('value', options.emptyKey); 
       oe.appendTo($first); 
      } 

      // add all options to first select box 
      $.each(values, 
      function(k, v) { 
       var of = $("<option>").html(k).attr('value', v.key); 
       if (options.preselectFirst !== null && v.key == options.preselectFirst) { 
        of.html(k).attr("selected", "selected"); 
       } 
       of.appendTo($first); 

      }); 

      if (options.preselectFirst === null) { 
       var $current = this.options[this.selectedIndex].value; 
       if ($current !== '') { 
        $.each(values, 
        function(k, v) { 
         var bestk; 
         if ($current == v.key) { 
          $.each(v.values, 
          function(k, v2) { 
           if (!bestk && (v.defaultvalue !== null && v2 == v.defaultvalue)) { 
            bestk = k; 
           } 
           if (options.preselectSecond !== null && v2 == options.preselectSecond) { 
            bestk = k; 
           } 
          }); 
          $.each(v.values, 
          function(k, v2) { 
           var o = $("<option>").html(k).attr('value', v2); 
           if (k === bestk) { o.html(k).attr("selected", "selected"); } 
           o.appendTo($second); 
          }); 

         } 

        }); 

       } else { 
        setValue(options.emptyValue); 
       } 
      } else { 
       $first.change(); 
      } 

     }); 

    }; 
})(jQuery); 

제 스크립트 샘플 코드는

<form action="" method="post" enctype="multipart/form-data"> 
<input type="hidden" name="action" value="1" /> 

<fieldset> 

<select type="text" name="address[state]" id="first" value="<?php // echo $_POST["address"]["state"]; ?>" class="short" tabindex="15"><option value="">--</option></select> 

<select type="text" name="address[city]" id="second" value="<?php // echo $_POST["address"]["city"]; ?>" class="short" tabindex="16"><option value="">--</option></select> 

</fieldset>       

<input type="submit" name="submit" id="submit" class="button grey" tabindex="15" value="<?php echo SPEC($GLOBALS['_LANG']['_tpl_myaccount33']) ?>" /> 

</form> 

이 문제에 도움을 주셔서 감사합니다. 고맙습니다.

답변

1

양식에 action이 없기 때문일 수 있습니까?

+0

안녕 Diodeus, 파일 자체를 실행하려면 작업이 비어 있습니다. – gdinari

+0

Firefox + Firebug를 사용하고 NET 탭을보십시오. 어떤 필드가 서버에 다시 게시되고 있는지 확인할 수 있습니다. 도움이 될 수 있습니다. –

+0

감사합니다. 감사합니다. – gdinari