Выберите раскрывающийся список для ввода текста с предопределенными значениями

0

У меня есть эта форма, поле Powerrange используется для создания URL-адреса, но требуемое значение отличается от входного! поэтому мы должны предопределять их.

<form id="form">

 <input type="text" id="powerrange"><br><br>

<input type="radio" name="location" value="store" checked/><label>America</label><br>
<input type="radio" name="location" value="store.au"/><label>Australia and Oceania</label><br>
<input type="radio" name="location" value="store.au"/><label>Africa</label><br>
<input type="radio" name="location" value="store.au"/><label>Asia</label><br>
<input type="radio" name="location" value="store"/><label>Europe</label><br><br>

Хорошо, это то, что у меня есть до сих пор:

function goToPage(){
var location = $('input[name=location]:checked').val();
var idConversions = {"100":14,"101":5000}
$('#powerrange').keyup(function(){
    var correctId = idConversions[$(this).val()];
        });

window.location.href = "http://"+location+".domain.com/catalog.aspx?section="+correctId+"";

}

  • 0
    Примечание: есть ли способ преобразовать систему так, чтобы значение и итоговое число совпадали? Есть ли способ сделать 100 = 100 и лучше переводить, чтобы избежать конвертации?
  • 0
    Да, я знаю! но это невозможно! Эти значения предопределены, но другой модуль! поэтому мне нужно их использовать!
Показать ещё 1 комментарий
Теги:

2 ответа

1

EDITED ANSWER: заменяет select> на <input>, проверяет входную запись на текстовые значения текущих параметров.

var minLengthRanges = 10000;
var ranges = $('#powerrange option').map(function () {
    var data = {
        val: this.value,
        section: $(this).text()
    }
    if (data.section.length < minLengthRanges) {
        minLengthRanges = data.section.length;
    }
    return data

}).get();


var currVal = $('#powerrange option:selected').text();
$('#powerrange').replaceWith('<input id="powerrange" type="number" value="' + currVal + '"/>');

$('#powerrange').keyup(function () {
    var val = this.value
    if (!val || val.length < minLengthRanges) {
        return;
    }
    var isValid = checkIsValidRange(val);
    $('body').append('<p>Value is ' + (isValid ? '' : 'not') + ' a match</p>');
    if (isValid) {
        var url = '.........catalog.aspx?section=' + val;
        $('body').append('<p>URL is ' + url + '</p>');
    }
});


function checkIsValidRange(val) {
    var isValidRange = false;
    if (val && !isNaN(parseInt(val, 10))) {
        isValidRange = $.grep(ranges, function (item, index) {
            return item.section == val;
        }).length;
    }
    return isValidRange;
}

DEMO

Поделиться
  • 0
    неправильно прочитана область ... теперь есть версия, которая заменяет ввод
0

Вам нужно будет создать предопределенный массив, чтобы ваш код знал 100= 14. На keyup, blur или submit или каком-либо событии формы, которое работает для вас, возьмите значение текстового поля, найдите нужное значение в массиве и затем создайте свою последнюю ссылку.

Здесь пример jsfiddle, как это можно сделать

$(function(){

    var idConversions = {"100":14,"101":5000}

    $('#the-text-field').keyup(function(){
        var correctId = idConversions[$(this).val()];
        if( typeof correctId !== "undefined") alert(correctId); 
    });

});

Если вам нужно поддерживать аналогичный массив на серверном коде, попробуйте найти способ совместного использования списка, чтобы вы не определяли "матрицу преобразования" в двух местах. Например, создайте серверный сервер в php или что-то еще, напечатайте его как JSON.

Поделиться
  • 0
    Умная! Человек, если бы вы могли дать мне руку с примером кода! Я ценю это!
  • 0
    Это там! У тебя есть идея! но я не могу заставить его работать! Нам нужно конвертировать введенное значение! и добавьте правильное значение в URL! Проверьте мой пост, пожалуйста! Я только что обновил это!
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню