مسج حدد استبدال القائمة

Question

ولدي حدد القائمة المنسدلة التي يختار موضوعا للصفحة الحالية للمستخدم على ما يلي:

<select id="style" name="acct-stylenum"> 
    <option value="1" selected="true">Light</option>
    <option value="2">Dark</option>                   
</select>  

والآن ما أود القيام به هو إضافة اثنين من عناصر div أن سيسيطر أيضا هذه القائمة المختارة. وأود أن ليس لديها الكثير للمستخدم اختيار بين صورتين من القائمة المختارة. وعناصر div هي كما يلي:

<div class="style-box light"></div>
<div class="style-box dark"></div>

وأود أن استخدام مسج لجعل القائمة اختر مخفي ولكن لا تزال تستخدم مدخلاته. كما أود أن عناصر div للسيطرة على قيمة القوائم وتظهر الحالة المحددة. واسمحوا لي أن أعرف أسهل طريقة يمكن القيام بذلك باستخدام مسج أو جافا سكريبت.

وشكرا مقدما.

و-B

Answer 1

وإذا كان لديك جميع الصور في نفس الترتيب كما الخيارات في اختيار هل يمكن ذلك شيئا من هذا القبيل (على افتراض نسخة مسج> = 1.3 و <1.4 لمؤشر الآن يفعل ما يجب)

$("div.style-box").live('click', function() {

  //get index of div clicked
  var index = $(this).prevAll().length;

  //select the corresponding option in the hidden select
  $('#style>option').eq(index).attr('selected', true);

});

Answer 2

وباستخدام هذا البرنامج المساعد: http://dev.jquery.com/browser/trunk / الإضافات / selectboxes يمكنك القيام بذلك:

$("#style-box-light").click(function() {
  $("#style").selectOptions("1");
});