苦労した後、私の問題に対して次のコードにたどり着きました。ただし、選択したオプションに選択済みを追加することはまだありません。私の元の質問は以下にあります。コードは改善されましたが、まだ機能しません。
var $index = $('.drop').index(this)
// find drop index...
var $indexofmonth = $index + 1;
//alert($indexofmonth); // this works
var $indeximg = event.dragTarget.title;
var $indeximgnum = $indeximg.replace(/[a-zA-Z]/g,"");
//alert($indeximgnum); // this gives only number 1,2,3,4 etc. Use this in option:eq(2)
var $featurenumber = "Feature" + $indexofmonth;
//alert($featurenumber); //this works
var $eqnum = 'option:eq('+$indeximgnum + ')';
//alert($eqnum); //working
//and set up like this $('select[name=Feature1] option:eq(3)').attr('selected', 'selected' );
// find the drop select
$sel = $("select[name='"+ $featurenumber +"']");
//the above html() give an array
$('$sel $eqnum').attr('selected', 'selected' );
//alert ('$sel $eqnum'); //this does not work
++++++++++++++++++++++++++++
これは私の元の質問です。
次の HTML と jQuery があります。HTML は CMS からの出力です。
http://threedubmedia.com/demo/drop/からのドラッグ アンド ドロップを使用しました。これは合計 6k であるためです。jQuery UI コア自体は 100k 以上です。
一枚の絵を月に落としたい。20 枚以上の画像があり、もちろん 12 か月あります。この目的のために、ドラッグ アンド ドロップを使用しました。
デモ用に 4 つの画像と 4 か月のみを使用しました。
パーツのドラッグ＆ドロップの仕方を整理しました。しかし、適切な月から適切な画像を選択するように関数を作成する方法に行き詰まっています。
たとえば、1 月にイルカの画像をドロップした場合、1 月の選択オプションでイルカを選択したいとします。
これが私がする必要があることだと思いますが、100％確実ではありません。
全体: ドロップされた領域のタイトルは、select の FeatureValue と等しくなければなりません。たとえば、januar は FeatureValue1 です。
ステップ 1: 削除された領域/月のインデックス番号 1,2,3 .. を見つけて、それを var monthindex として割り当てます
ステップ 2: 次に、var index を FeatureValue var featurenumber に追加します
ステップ 3: tis が select の FeatureValue(インデックス番号) と同じ場合は、次を実行します。
ステップ 4: ドロップされた画像のタイトルを見つける var = dropimg
ステップ 5: :selected を選択オプションの値に追加します。
私はあなたの助けに感謝します。前もって感謝します。
HTML
<div id="calendarimg">
<div id="status"></div>
<div id="calendartable">
<div id="jan" class="drop" Title="januar" > </div>
<div id="feb" class="drop" Title="febrar" > </div>
<div id="mar" class="drop" Title="mars" > </div>
<div id="apr" class="drop" Title="april"> </div>
<div id="mai" class="drop" Title="mai"> </div>
<div id="jun" class="drop" Title="juni"> </div>
<div id="jul" class="drop" Title="juli"> </div>
<div id="aug" class="drop" Title="august"> </div>
<div id="sep" class="drop" Title="september"> </div>
<div id="oct" class="drop" Title="october"> </div>
<div id="nov" class="drop" Title="november"> </div>
<div id="dec" class="drop" Title="december"> </div>
</div>
<div id="nodrop">
<div class="drag" title="Angel" id="angel1"></div>
<div class="drag" title="Dolphin" id="dolphin2"></div>
<div class="drag" title="Fantail" id="fantail3"></div>
<div class="drag" title="Hawk" id="hawk4"></div>
</div>
<!-- End of printimgs -->
</div>
<div id="featureright2">
<form method="post" action="http://www.mywebsite.com/shopaddtocart.asp">
<table cellspacing="1" cellpadding="2" border="0"><tr><td class="al">
<p class="al"><strong>januar</strong></p>
<select size="3" name="FeatureValue1">
<option value="" selected="selected">velg</option>
<option value="97">Angel</option>
<option value="98">Dolphin</option>
<option value="99">Fantail</option>
<option value="89">Hawk</option>
</select>
<input type="hidden" name="Feature1" value="88">
<p class="al"><strong>februar</strong></p>
<select size="3" name="FeatureValue2">
<option value="" selected="selected">velg</option>
<option value="109">Angel</option>
<option value="110">Dolphin</option>
<option value="111">Fantail</option>
<option value="101">Hawk</option>
</select>
<input type="hidden" name="Feature2" value="100">
<p class="al"><strong>mars</strong></p>
<select size="3" name="FeatureValue3">
<option value="" selected="selected">velg</option>
<option value="112">Angel</option>
<option value="121">Dolphin</option>
<option value="122">Fantail</option>
<option value="123">Hawk</option>
</select>
<input type="hidden" name="Feature3" value="120">
<p class="al"><strong>april</strong></p>
<select size="3" name="FeatureValue4">
<option value="" selected="selected">velg</option>
<option value="124">Angel</option>
<option value="133">Dolphin</option>
<option value="134">Fantail</option>
<option value="135">Hawk</option>
</select>
<input type="hidden" name="Feature4" value="132">
</td></tr><tr><td class="ac">
<input class="txtfield" type="text" size="2" maxlength="3" name="quantity" value="1" />
</td><td class="ac vm"><input class="imgbtn" src="images/vpnav_buy_norw.gif" type="image"></td></tr>
<input type="hidden" name="productid" value="81" />
</table></form>
</div>
jQuery
$(".drag")
.bind( "dragstart", function( event ){
// ref the "dragged" element, make a copy
var $drag = $( this ), $proxy = $drag.clone();
// modify the "dragged" source element
$drag.addClass("outline");
// insert and return the "proxy" element
return $proxy.appendTo( document.body ).addClass("ghost");
})
.bind( "drag", function( event ){
// update the "proxy" element position
$( event.dragProxy ).css({
left: event.offsetX,
top: event.offsetY
});
})
.bind( "dragend", function( event ){
// remove the "proxy" element
$( event.dragProxy ).fadeOut( "normal", function(){
$( this ).remove();
});
// if there is no drop AND the target was previously dropped
if ( !event.dropTarget && $(this).parent().is(".drop") ){
// output details of the action
$('#status').empty().append('<div>Removed <b>'+ this.title +'</b> from <b>'+ this.parentNode.title +'</b></div>');
// put it in it's original div...
$('#nodrop').append( this );
}
// restore to a normal state
$( this ).removeClass("outline");
});
$(".drop")
.bind( "dropstart", function( event ){
// don't drop in itself
if ( this == event.dragTarget.parentNode ) return false;
// activate the "drop" target element
$( this ).addClass("active");
})
.bind( "drop", function( event ){
// if there was a drop, move some data...
$( this ).append( event.dragTarget );
// output details of the action...
$('#status').empty().append('<div>Dropped <b>'+ event.dragTarget.title +'</b> into <b>'+ this.title +'</b></div>');
})
.bind( "dropend", function( event ){
// deactivate the "drop" target element
$( this ).removeClass("active");
});