Select dropdown to input text with predefined values

我有這種形式的Powerrange字段用於創建URL，但所需的值與輸入值不同！所以我們需要預先定義它們。Select dropdown to input text with predefined values

<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+"";

}

來源

2013-11-10 Procomp Pcm

側面說明，有沒有什麼辦法將系統轉換，這樣的價值，最後的數字是一樣的嗎？任何方式使100 = 100和翻譯更好，所以你可以避免轉換？ – helion3

是的，我知道！但這是不可能的！這些值是預定義的，但另一個模塊！所以我需要使用它們！ –

沒關係，我想。由於其他開發者不得不處理約束是每天的事情。 – helion3

你需要建立一個預先定義的陣列，因此您代碼知道100 = 14。在keyup,blur或submit或某些適用於您的表單事件中，取文本字段的值，查找數組中的正確值，然後構建最終鏈接。

下面是它可能會如何做

$(function(){ 

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

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

});

如果你需要維持在服務器端代碼類似的陣列，試圖找到一種方式來分享這樣你就不會定義列表中jsfiddle sample 「轉換矩陣」在兩個地方。就像在PHP或其他東西中構建數組服務器端一樣，將其打印爲JSON。

來源

2013-11-10 01:59:32 helion3

聰明！男人如果你能給我一個樣本代碼的手！我會很感激！ –

它到達那裏！你有想法！但我無法讓它工作！我們需要轉換輸入的值！並在URL中添加正確的值！請檢查我的帖子！我剛剛更新了它！ –

您需要在函數內部生成新的鏈接，並且您還需要保留未定義的檢查，我有 – helion3

編輯答案：用<input>代替select>，根據當前選項的文本值驗證輸入條目。

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

來源

2013-11-10 02:31:39 charlietfl

誤讀範圍...現在有替換輸入的版本 – charlietfl

Select dropdown to input text with predefined values

回答

相關問題