web-dev-qa-db-ja.com

階層選択の子のラベル

Simple Hierarchical Select Module を使用しているときに、電話に2レベルの階層があります。 enter image description here

ただし、次のような子リストのラベルを追加したいと思います。

enter image description here

これは可能ですか？ではどうやって？

7hierarchical-select
1
user12947

Intervel関数を設定すると、カスタムjquaryを使用できます。

例：下にスクリーンショットを添付しました

//州にラベルを追加//最初のレベルを変更（ここでは国）

$('select.shs-select-level-1').change(function(){

    var $aSelected = $('.shs-wrapper-processed').find('label'); 

    if( $aSelected.hasClass('Extra-Label1') ){
        $('.Extra-Label1').text("State");
    }
    else{
        $('select.shs-select-level-2').before('<label class="Extra-Label1">State</label>');
    }

});

//都市にラベルを追加

$('select.shs-select-level-2').change(function(){

    var $aSelected = $('.shs-wrapper-processed').find('label'); 

    if( $aSelected.hasClass('Extra-Label2') ){
        $('.Extra-Label2').text("City");
    }

    else{           
        $('select.shs-select-level-3').before('<label class="Extra-Label2">City</label>');
    }
});

//上記のコードは問題ありませんが、選択レベルを変更すると最後のラベルが失われるため、set intervel関数を追加する必要があります

setInterval(function(){
    var $aSelected = $('.shs-wrapper-processed').find('label'); 
    var $bSelected = $('.shs-wrapper-processed').find('select');
    if( $aSelected.hasClass('Extra-Label2')&& $bSelected.hasClass('shs-select-level-3') ){
        $('.Extra-Label2').text("City");
    }
    else{
        $('select.shs-select-level-3').before('<label class="Extra-Label2">City</label>');
    }

},1000);

enter image description here

1
Soliyappan

この答えはずっと前に答え​​られているので、私は遅れていることを知っていますが、これは、特にJavaスクリプト間隔関数-それを使用して）正しい方法ではないと思います動作する可能性がありますが、多くの場合、問題が発生する可能性があります。

同じ結果が必要な場合は、これを使用することをお勧めしますJava ajaxStopイベントがトリガーされたときのアクションに基づくスクリプトコード。

まず、Javaスクリプトファイルをモジュールディレクトリに作成します。例：YOUR_MODULE_NAME/js/custom_shs_behaviors.js次のコードを使用：

/**
 * @file
 * Custom behaviors for Simple hierarchical select:
 *   Change the first option text from "- None -" to whatever you want (default: "- Any -").
 *   Create labels for each level.
 */
 (function($) {
  Drupal.behaviors.customShsBehaviors = {
    attach: function (context, settings) {

      // Helper function for an option text replacement.
      // use: optionObj.replaceOptionText(); for default replacement from '- None -' to '- Any -'.
      // or optionObj.replaceOptionText('Foo'); to replace the '- None -' with 'Foo'.
      $.fn.replaceOptionText = function(replacement) {
        var replacement = replacement ? replacement : '- Any -';
        if ($(this).text() == Drupal.t('- None -')) {
          $(this).text(Drupal.t(replacement));
        }
      };

      // Function that helps to get the select element width including its padding and margin.
      $.fn.getSelectWidth = function() {
        var width = Math.round($(this).wrap('<span></span>').outerWidth(true));
        $(this).unwrap();
        return width;
      }

      // Define labels.
      var labels = ['Label-1', 'Label-2', 'Label-3'];

      // act when the ajaxStop event is triggered (there are no more Ajax requests being processed.)
      // see: @link http://api.jquery.com/Ajax_Events/ @endlink
      $('.shs-wrapper-processed').ajaxStop(function(event, xhr, settings) {

        $("select.shs-select").each(function(level) {

          // fix the SHS bug - new level that is being created has the same ID as the previous one.
          // make sure that each select has an ID and the class corresponding to the level.
          // YOU CAN USE THESE TWO LINES ONLY IF YOU ARE USING SHS WITH THE ABILITY TO ADD NEW LEVELS.
          $(this).attr('id', $(this).attr('id').replace(/(.*)select-(\d+)/, "$1select-" + (level+1)));
          $(this).attr('class', $(this).attr('class').replace(/(.*)level-(\d+)/, "$1level-" + (level+1)));

          // Replace the first option text using the helper function for an option text replacement.
          $("option", this).first().replaceOptionText();

          // Get label width.
          var labelWidth = $(this).getSelectWidth();

          // Create label.
          if ($("label[for='" + $(this).attr('id') + "']").length == 0) {
            $(this).parent().before(
              "<label for='" + $(this).attr('id') + "' style='display: inline-block; width: " + labelWidth + "px'>" + labels[level] + "</label>"
            );
          }

          // Remove the label if the select element has just been removed by clicking any option on lower level.
          // There might be several Ajax requests bound with this action,
          // so we have to make sure that our "removing process" will be executed at most once.
          // See: @link http://api.jquery.com/one/ @endlink
          $("option:not(:selected)", this).one("click", function() {
            $(".shs-wrapper-processed").parent().find("label").each(function() {
              if ($(this).attr('for').slice(-1) > level+1) {
                $(this).remove();
              }
            });
          });
        });
      });
    }
  };
})(jQuery);

Javaスクリプトファイルをフォームに添付します。これは、テーマまたはモジュールファイルで hook_form_alter（） を使用して実行できます。

/**
 * Implements hook_form_alter.
 */
function YOUR_MODULE_NAME_form_alter(&$form, &$form_state, $form_id) {

  switch($form['#id']) {
    case 'YOUR-FORM-ID' :
      $form['#attached']['js'][] = drupal_get_path('module', 'YOUR_MODULE_NAME') . '/js/custom_shs_behaviors.js';
    break;
  }
}

完了です！このコードを使用すると、 shs の各レベルにラベルを設定でき、デフォルトのオプションテキストを変更することもできます。例：from - none -から- any -。

2
Jack-PL

一部の開発者は、（最上位のカテゴリのヘッダーではなく）階層選択のタイトルを表すために、最上位のカテゴリに既存のラベルを使用したい場合があります。

デモの場所階層を使用して、同様の効果を達成できる別の（jQuery）方法を次に示します。

カスタムjsでは、ドキュメントが「準備完了」のときにトップレベルのラベルを追加できます-カスタムの方法または推奨されるDrupal.behaviorsの方法（どちらも実証されていません）。

$('select.shs-select-level-1').before('<label class="shs-label">' + Drupal.t('Region') + '</label>');

次に、コンテナ全体の変更を監視します。いずれかが検出された場合、カスタムクラスのすべてのラベルをクリアしてから、jQueryが例外を無視できるすべてのクラスを再アタッチできます。

$('#field-select-a-city-add-more-wrapper').change(function () {
    $('#field-select-a-city-add-more-wrapper').find('label.shs-label').remove();
    $('select.shs-select-level-1').before('<label class="shs-label">' + Drupal.t('Region') + '</label>');
    $('select.shs-select-level-2').before('<label class="shs-label">' + Drupal.t('Country') + '</label>');
    $('select.shs-select-level-3').before('<label class="shs-label">' + Drupal.t('State') + '</label>');
    $('select.shs-select-level-4').before('<label class="shs-label">' + Drupal.t('City') + '</label>');
});
0
user24737