Jump to content
  • Sign Up

Как можно доработать калькулятор на сайте, что бы подключить "бегунок" datalist, к функции основных вычислений


Recommended Posts

Здравствуйте. Подскажите пожалуйста, как решить такой вопрос, у меня на сайте есть небольшой калькулятор, который делает вычисления общей суммы после выбора опций нескольких опций. Я хотел бы добавить (для удобства) вот такой "бегунок" datalist состоящий из 10-и позиций:

<datalist id="rangeList">
<option value="4" label="4">
<option value="5" label="5">
<option value="6" label="6">
<option value="7" label="7">
<option value="8" label="8">
<option value="9" label="9">
<option value="10" label="10">
<option value="11" label="11">
<option value="12" label="12">
<option value="13" label="13">
<option value="14" label="14">
<option value="15" label="15">
</datalist>

и что бы при передвижении его общая сумма вычислений менялась автоматически при каждом шаге передвижения этого бегунка на значение value="0_+100". как можно правильно добавить class="", id="", name="" в option value этого datalist, что бы производились вычисления. Вот фрагмент кода этого калькулятора:

<div class="heady">
<input type="hidden" name="invote" class="invote">
<select name="srok" class="inputbox headnot">
<option value="0" sumfor="headnot">Выберите кол-во эффектов</option>
<option value="0_*1" sumup="10">1 эффект</option>
<option value="0_*1.5" sumup="20">2 эффекта</option>
<option value="0_*1.9" sumup="50">3 эффекта</option>
<option value="0_*2.4" sumup="70" >4 эффекта</option>
<option value="0_*3.0" sumup="100">5 эффектов</option>
<option value="0_*3.7" sumup="200">6 эффектов</option>
<option value="0_*4.5" sumup="300">7 эффектов</option>
<option value="0_*5.4" sumup="400">8 эффектов</option>
<option value="0_*6.5" sumup="500">9 эффектов</option>
</select>
<div class="heady">
<select name="sel[]" class="inputbox plag">
<option value="0_+0" sumend="0" class="headnot">Выберите опции вставки текста</option>
<option value="0_+0" sumend="0" class="headnot">Мне не нужно показывать текст</option>
<option value="0_+500"  sumend="0" class="headnot">Вставка вашего текста в кол-ве, как в примере</option>
<option value="0_+800"  sumend="0" class="headnot">Вставка вашего текста более 30-50% чем в примере</option>
<option value="0_+1000"  sumend="0" class="headnot">Вставка вашего текста более 50-80% чем в примере</option>
<option value="0_+1200"  sumend="0" class="headnot">Вставка вашего текста более 50-80% чем в примере</option>
</select>
</div>
<div class="count variant">
<input type="hidden" name="countone" class="countone" value="promt">
<label class="myCheckbox"><input type="radio"  class="plat" name="plat" value="0_+0" checked="checked"><span class="chk"></span>Нет</label>
<label style="color: #0823C0" class="myCheckbox"><input type="radio" class="plat" name="plat" value="0_+200"><span class="chk"></span>SD карта</label>
<label style="color: #0823C0" class="myCheckbox"><input type="radio" class="plat" name="plat" value="0_+300"><span class="chk"></span>DVD запись</label></div>

Link to post
Share on other sites

Здравствуйте. Для решения этой задачи Вам потребуется что-то такое: https://jqueryui.com/slider/#range

Link to post
Share on other sites

Спасибо вам за совет, он конечно бы устроил меня, но ситуация, такая, что он должен работать вместе с другими пунктами калькулятора, применимо к datalist. Если у вас есть совет как можно правильно их встроить id, class, name, value в datalist что бы заработал по аналогии с 

<input type="hidden" name="countone" class="countone" value="promt">
<label class="myCheckbox"><input type="radio"  class="plat" name="plat" value="0_+0" checked="checked"><span class="chk">

Link to post
Share on other sites

Вам требуется интегрировать данное решение в свою среду.

При инициализации передайте значения min/max: https://api.jqueryui.com/slider/#option-min
А событие "change" позволит отлавливать изменения положения ползунка и делать просчёты: https://api.jqueryui.com/slider/#event-change

Link to post
Share on other sites

Благодарю за содействие, но мне не подходит ваша подсказка - работы с содержимым скриптов. Все гораздо проще может же datalist работать вместе с другими "похожими" пунктами калькулятора, применимо к option value="0_+500"  sumend="0" class="headnot", и скорее всего можно просто встроить id, class, name, value в datalist что бы заработал по аналогии с  указанным мной куском html кода в одном из этих <div>. В калькуляторе вычисления все однотипные, и этот datalist будет просто добавлять option value="" к конечной сумме всех остальных пунктов выбора опций калькулятора.

Link to post
Share on other sites

То есть, в ответ Вы хотите получить готовое решение на предоставленную вышеизложенную информацию?

Link to post
Share on other sites
4 часа назад, klierik сказал:

То есть, в ответ Вы хотите получить готовое решение на предоставленную вышеизложенную информацию?

Я не понимаю, почему никто не представляет, что мне требуется. Я просто хочу подсказку, как мне действовать, что бы добавить новый блок в калькуляторе. Для спецов это же так просто. А дальше я сам доработаю. Все отправляют в "скрипты". Они здесь ни при чем. В этот код я добавлял уже в html доп. блоки по тэгу select. А в этом случае мне нужно добавить по тэгу datalist. Если есть идеи, то подскажите как примерно это можно в datalist прописать.

Link to post
Share on other sites

Мне кажется ситуация несколько иначе — Вы не понимаете ответов на свои вопросы. А сами вопросы против — понятны. Попробуем разобраться.

2 часа назад, Ron2 сказал:

Я просто хочу подсказку, как мне действовать, что бы добавить новый блок в калькуляторе. Для спецов это же так просто.

Я вам предоставил не просто подсказку, а больше — пример реализации. Не решение.
В данный момент я не представляю Вашу задачу, не могу её визуализировать, тем самым не предоставляю себе возможным дополнить свой ответ.

Мне не известно что Вы подразумеваете под термином "блок". Так же не знаю как выглядит Ваш калькулятор и какую задачу он выполняет. Не представляю как он реализован и какими возможностями владеет.

С виду поставленная вами задача проста, потому и её решение предлагается наиболее простое.

2 часа назад, Ron2 сказал:

Все отправляют в "скрипты". Они здесь ни при чем.

Беря во внимание тематику текущего ресурса, ожидается что Ваша реализация написана на скрипте JavaScript, так как о другом сказано не было. Вы хотите расширить возможности модуля, которые выполняет известную лишь Вам задачу. Именно по этому логично предложить такой путь для решения данной проблемы.

Если Вы утверждаете что скрипты тут не причём — то я не могу себе представить, каким же образом реализован обсуждаемый модуль.

2 часа назад, Ron2 сказал:

В этот код я добавлял уже в html доп. блоки по тэгу select. А в этом случае мне нужно добавить по тэгу datalist. Если есть идеи, то подскажите как примерно это можно в datalist прописать.

Не понятно о каком именно коде идёт речь. Более того — то, как Вы изъясняете поставленную задачу крайне не информативно. У меня складывается ощущение, что Вы используете техническую терминологию, которой не владеете. То есть — такая поставка задача не информативна.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Member Statistics

    47,118
    Total Members
    1,451
    Most Online
    seonka.
    Newest Member
    seonka.
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...