0

HTML：

<input type="radio" name="timeformat" id="timeformat-a" value="am/pm" checked="checked" /> <b>am/pm</b> 
<input type="radio" name="timeformat" id="timeformat-b" value="24 hours" /> <b>24 hours</b>
        <select id="default-start-time" class="select check-list">
             <option value="" label="--Select--">--Select--</option>
             <option value="00:00" label="12:00 AM">12:00 AM</option>
             <option value="00:30" label="12:30 AM">12:30 AM</option>
             <option value="01:00" label="01:00 AM">01:00 AM</option>
             <option value="01:30" label="01:30 AM">01:30 AM</option>
             <option value="02:00" label="02:00 AM" selected>02:00 AM</option>
             <option value="02:30" label="02:30 AM">02:30 AM</option>
        </select>

24時間形式を選択すると、オプション値が表示されます。

jquery：

$("input[name='timeformat']").click(function() {
      if($(this).val()=='24 hours')
      {
         // code which replaces label with the option value       
      }
  });

jqueryはどのように見えるべきですか？

4

3 に答える 3

1

選択した値に基づいてラベルの状態を変更すると、ラベルが永続的に変更されます。切り替えたい各値への参照を、操作しやすいものの中に格納する必要があるため、data属性を使用します。

HTMLにアクセスできるかどうかわからないので、必要な処理を実行するためのjQueryを次に示します。 

$('#default-start-time option').each(function(index,obj){
   $(obj).data('ampm', $(obj).prop('label'));
   $(obj).data('24hr', $(obj).val());
});

これで、クリック機能で、選択した値に基づいてデータ属性を切り替えることができます。

$("input[name='timeformat']").click(function() {
  if($(this).val()=='24 hours')
  {
      $('#default-start-time option').each(function(index,obj){
          $(obj).prop('label', $(obj).data('24hr'));
      });             
  }
  else
  {
      $('#default-start-time option').each(function(index,obj){
         $(obj).prop('label', $(obj).data('ampm'));
      });
  }
});

これが完全に機能するjsFiddleです。

于 2012-08-25T21:17:11.410 に答える
1

要素labelに属性とテキストコンテンツの両方がある場合は、が優先されます。<option><label>

次のように、値をラベルにコピーできます。

$('#default-start-time option').attr('label', function() {
     return this.value;
});

同様に、次のようにテキストコンテンツをラベルにコピーして戻すことができます。

$('#default-start-time option').attr('label', function() {
    return this.innerHTML;
});

http://jsfiddle.net/alnitak/cLuZa/を参照してください

（少なくともChromeでは）どちらもコントロールが現在表示されている値を変更しないことに注意してください。<select>要素をもう一度クリックしたときにのみ表示されます。私はまだそれに取り組んでいます...

ここに私の最終的な答えを編集してください：

$("input[name='timeformat']").click(function() {
    var ampm = $(this).val() !== '24 hours';  // get mode
    var sel = $('#default-start-time')[0];    // get the <select> element

    $('option', sel).attr('label', function() {
        return ampm ? this.innerHTML : this.value;
    });

    sel.selectedIndex += 0;  // force refresh
});​
于 2012-08-25T21:21:15.353 に答える
0

HTMLを2倍にして、JSを単純化することをお勧めします。

HTML：

<input type="radio" name="timeformat" value="12" checked="checked" /> <b>am/pm</b> 
<input type="radio" name="timeformat" value="24" /> <b>24 hours</b>

<select id="format-12" class="">
     <option value="" selected>--Select--</option>
     <option value="12:00 AM">12:00 AM</option>
     <option value="12:30 AM">12:30 AM</option>
     <option value="01:00 AM">01:00 AM</option>
     <option value="01:30 AM">01:30 AM</option>
     <option value="04:00 PM">04:00 PM</option>
     <option value="05:30 PM">05:30 PM</option>
</select>
<select id="format-24" class="hide">
     <option value="" selected>--Select--</option>
     <option value="00:00">00:00</option>
     <option value="12:30">12:30</option>
     <option value="01:00">01:00</option>
     <option value="01:30">01:30</option>
     <option value="16:00">16:00</option>
     <option value="17:30">17:30</option>
</select>

JS：

$("input[name='timeformat']").on('change', function(){
    $('select[id*=format-]').toggleClass('hide');
});​

CSS：

.hide { display: none; }​

デモ：http：//jsfiddle.net/9ELJj/

于 2012-08-25T21:54:38.717 に答える