2011-08-29 22 views
0

コンボ選択されたドロップダウンオプションにjqueryスクリプトを使用しています。スクリプトは、選択したオプションを送信した後に選択肢として保存されていないことに加えて、各ドロップダウンリストの最初の値にデフォルト設定されていることに加えて、うまく機能します。提出後にJqueryフォームの選択が保存されない

私はこれについていくつかの助けが必要です。既存の投稿や別の方法のいずれかに追加できる解決策がありますか?

私は2つのスクリプトを使用しています.1つは二重ドロップを選択します(1つのドロップは別のドロップに依存します)。もう1つのスクリプトはすべてのオプションとそのサブオプションをリストします。ここ

(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); 

2番目のスクリプトからのサンプルコードされる:ここ

は、最初のスクリプトのコードである

$(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イム使用である:

<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

ハイ・ダイオードでは、ファイル自体を実行する処理が空白です。 – gdinari

+0

Firefox + Firebugを使用して、[NET]タブを見てください。どのフィールドがサーバーにポストバックされているかを見ることができます。それは助けるかもしれません。 –

+0

私はそれを確認します、ありがとう – gdinari

関連する問題