选择下拉列表以输入具有预定义值的文本

Select dropdown to input text with predefined values

本文关键字：预定义 文本 下拉列表 输入 选择      更新时间：2023-09-26

我有这种形式，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+"";

}

编辑的

答案：将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;
}

演示

您需要构建一个预定义的数组，以便您的代码知道 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。

相关文章：