Как передалать кнопки в выплывающий список?

Question

[Rostyk Ice]

У меня есть много кнопок как переделать их чтобы был только выплывающий список и когда выбираю из списка той или другой варинт выполнялось действие которое задано под кнопкой ?
Вот коды кнопок:

$('body').append('<input type="button" value="бе" id="btn8">')
  $("#btn8").css("position", "absolute").css("top", 122).css("left", 200);
  $('#btn8').click(function(){
$('[name="product_option[3][product_option_value][2][option_value_id]"]').val('5');   // 5464
var checkbox = $('[name="product_category[]"][value=5464]');
var isChecked = checkbox.prop("checked");
checkbox.prop('checked', !isChecked);
});
$('body').append('<input type="button" value="б" id="btn9">')
  $("#btn9").css("position", "absolute").css("top", 122).css("left", 220);
  $('#btn9').click(function(){
$('[name="product_option[3][product_option_value][2][option_value_id]"]').val('181');
var checkbox = $('[name="product_category[]"][value=5465]');
var isChecked = checkbox.prop("checked");
checkbox.prop('checked', !isChecked);
});
$('body').append('<input type="button" value="г" id="btn10">')
  $("#btn10").css("position", "absolute").css("top", 122).css("left", 240);
  $('#btn10').click(function(){
$('[name="product_option[3][product_option_value][2][option_value_id]"]').val('193');
var checkbox = $('[name="product_category[]"][value=5466]');
var isChecked = checkbox.prop("checked");
checkbox.prop('checked', !isChecked);
});
$('body').append('<input type="button" value="ж" id="btn11">')
  $("#btn11").css("position", "absolute").css("top", 122).css("left", 260);
  $('#btn11').click(function(){
$('[name="product_option[3][product_option_value][2][option_value_id]"]').val('134');
var checkbox = $('[name="product_category[]"][value=5467]');
var isChecked = checkbox.prop("checked");
checkbox.prop('checked', !isChecked);
});
$('body').append('<input type="button" value="з" id="btn12">')
  $("#btn12").css("position", "absolute").css("top", 122).css("left", 280);
  $('#btn12').click(function(){
$('[name="product_option[3][product_option_value][2][option_value_id]"]').val('26');
var checkbox = $('[name="product_category[]"][value=5468]');
var isChecked = checkbox.prop("checked");
checkbox.prop('checked', !isChecked);
});
$('body').append('<input type="button" value="ко" id="btn13">')
  $("#btn13").css("position", "absolute").css("top", 122).css("left", 300);
  $('#btn13').click(function(){
$('[name="product_option[3][product_option_value][2][option_value_id]"]').val('205');
var checkbox = $('[name="product_category[]"][value=5469]');
var isChecked = checkbox.prop("checked");
checkbox.prop('checked', !isChecked);
});

Кнопок больше, показал пример.
Можете показать 1 пример как сделать ?

Comments

[Anton Filippov]

клевый код у вас)

[Rostyk Ice]

Антон: чем?

[Anton Filippov]

Rostyk Ice: можно давать джуниорам и говорить - если отрефактроишь до 10 строк - возьмем на работу, если нет то шуруй отсюда))

[Rostyk Ice]

Да ладно, работает же.
Лучше скажите как сделать выплываюшую строку на JS ?

[Rostyk Ice]

Антон: КАК ЧЕТ НАПИСАТЬ ТАК ТУТ АКА ПО СУТИ ТАК ПОШУРУВАЛ ОТСЮДА!!!

[Anton Filippov]

Rostyk Ice: я просто прокомментировал) мало кто захочет помогать и вступать в такой говнокодик :3

[Rostyk Ice]

Антон: Да при чем тут говнокодик? Нужен просто код раскрывающегося списка JS и всеее!!

[Anton Filippov]

Rostyk Ice: spisok.raskroysya();

[Rostyk Ice]

Антон: piska.zakroysya();

[Anton Filippov]

Rostyk Ice: ваши вопросы очень многое о вас говорят) учитесь общаться с людьми и пользоваться поисковиками и будет вам счастье

[Rostyk Ice]

Антон: Умею, просто бомбануло.
Я не 1 начал.

Answer 1

[Сергей Иванов]

Ну вам для начала бы все это делать не через append а сделать просто версткой. Код сократиться раза в 4. Далее

$('[name="product_option[3][product_option_value][2][option_value_id]"]')

такие конструкции не рекомендуется делать. Это во-первых нечитаемо, во-вторых медленнее.

$("#btn13").css("position", "absolute").css("top", 122).css("left", 300);

// такие вещи переделываются так

$("#btn13").css({
"position": "absolute",
"top":122,
"left": 300
});

$('#btn13').click(function(){

// Можно переделать на такой лад. 
// Не знаю насколько это правильно использовать так replace 

$('input[type="button"]').click(function(){
 if(this.id.match( /btn([0-9]+)/g  )){
    this.id.replace(/btn([0-9]+)/g, function( all , number)){
      if(){...}
      switch ...
   } )
  }
})

var checkbox = $('[name="product_category[]"][value=5467]');
var isChecked = checkbox.prop("checked");

// Чем меньше переменных тем лучше

$('[name="product_category[]"][value=5467]').prop( "checked" ) // true || false

Когда ваш код можно будет хоть как то читать - пишите еще раз вопрос

Для прочтения

Comments

[Rostyk Ice]

Просто как создать выплывающий список на JS и что б при выборе из списка нажималась галочка на странице. Как зделать?

[Rostyk Ice]

ЗАЧЕЕЕЕМ ПИСАТЬ ЕСЛИ НИКАКОЙ ПОМОЩИ В ВАШЕМ ПВ!!!!

[Сергей Иванов]

Rostyk Ice: Я вам предложил огромную помощь в чистке кода после которого у вас появится понимания работы с javascript и в частности с jquery. Пока у вас такой код, вы никогда не сделаете программы. У вас будет ода головная боль и куча вопросов на тостере без ответов, потому что ваш код идеален для (* не реклама) "говнокода"

[Rostyk Ice]

Writerim: Не надо было приводить код кнопок.
Это скрипт для себя, а не для заказчика или для кого-то на продажу или в него будут иметь доступ другие люди, то есть никто с ним работать не будет и я понимаю как он работает и мне этого достаточно, не работал бы он я бы им не пользовался. Я попросил код раскрывающегося списка, потому что нигде нет как его сделать на чистом JS только с помощью CSS и HTML. Легче было вам объяснить что мне надо список который должен был иметь пункты от 1-10 и при выборе пункта ставилась бы отметка на сайте по ее названию или айди. А сейчас вы предлагаете мне очень большую услугу по оптимизации кода, я не хочу отнимать у вас время и спрашивать много потому что знаю что это нагло, а прошу только код раскрывающегося списка с одной функцией в качестве примера( поставить галочку на сайте навел код галочки как он есть на сайте

<input type="checkbox" name="product_category[]" value="5464">

и выбрать из списка 1 вариант вот код как он есть на сайте

<select name="product_option[0][product_option_value][0][option_value_id]">  <option value="5">Бежевый</option>

)а остальные массива допишу сам.
То есть вкратце в конечном варианте должно быть вместо 30 кнопок список который раскрывается и в нем 30 пунктов выбора, после выбора того или иного пункта выполняется действие нажатия галочки на сайте и выбор варианта из другого списка. Сейчас эти функции выполняют кнопки. Я самоучка по языкам программирования, но знаю что все у меня на вид как рисунки в доисторического человека для вас как знатока. Но я знаю что просил и что мне надо было. Я не могу оценить то что вы мне хотели помочь так как не понимаю насколько ценна была ваша информация, поэтому примите мои извинения и мою неправоту.

[Rostyk Ice]

Writerim: И к всему написаному добавлю что умею создавать только строку ввода и кнопку на JS и базовые знания как создать страницу на html.