2013-01-10 12 views
8

consideri un markup comeTrovare più vicino valore corrispondente utilizzando jQuery o JavaScript

<select id="blah"> 
    <option value="3">Some text</option> 
    <option value="4">Some text</option> 
    <option value="8">Some text</option> // <---- target this tag based on value 7 
    <option value="19">Some text</option> 
</select> 

Supponiamo che io ho un valore con me, dire 7. E 'possibile indirizzare il tag opzione il cui value attributo è più vicino a 7 che , in questo caso, sarebbe <option value="8">?

Sono a conoscenza di ^ che significa iniziare con e $ che significa terminare con e speravo se ci fosse qualcosa di simile a trovare la corrispondenza più simile per un dato valore.

+4

Stai solo cercando il più alto valore più vicino? Ad esempio, hai '6', sarebbe' 5' valido, o '7'? –

+0

Potrebbe essere il più alto o il più basso ... non importa. Voglio solo targetare quell'elemento e aggiungere un altro tag opzionale dopo o prima di esso – asprin

+0

Le opzioni sono ordinate per valore? –

risposta

4

andrò in questo modo:

http://jsfiddle.net/GNNHy/

var $tmpOption = $('<option value="7">Some text 7</option>'); 
$("#blah").append($tmpOption); 
var my_options = $("#blah option"); 
my_options.sort(function(a,b) { 
    if (parseInt(a.value,10) > parseInt(b.value,10)) return 1; 
    else if (parseInt(a.value,10) < parseInt(b.value,10)) return -1; 
    else return 0 
}) 

$("#blah").empty().append(my_options); 
+3

Perfetto! Aggiungi e poi ordina! La logica era così semplice eppure mi mancava. +1 e accettato – asprin

1

Sì, basta sottrarre il valore (7) con i valori dell'opzione (utilizzare ciascuna funzione) ... il valore con il risultato positivo minimo sarà l'opzione mirata. Spero che tu abbia il risultato desiderato.

+0

I don "Penso che" il più vicino possibile "sia un'interpretazione corretta –

+0

+1 per aver dedicato tempo a pubblicare una risposta. – asprin

3

Che ne dici di una ricorsione? Troverà il valore più vicino:

JS-BIN Demo

function getClosest(val, ddl, increment){ 
    if(ddl.find('option[value="'+val+'"]').length){ 
     return val; 
    } 
    else 
    try{ 
     if(increment) 
    return getClosest(++val, ddl, increment); 
     else 
     return getClosest(--val, ddl, increment); 
    } 
    catch(err){ 
    return -1; 
    } 
} 

function findClosest(val, ddl){ 
    var larger = getClosest(val, ddl, true); 
    var smaller = getClosest(val, ddl, false); 
    if(larger == smaller == -1) 
    return -1; 
    else if (larger == -1) 
    return smaller; 
    else if (smaller == -1) 
    return larger; 

    if(larger - val > val - smaller) 
    return smaller; 
    else 
    return larger 
}  
+0

Aggiornato al più vicino –

+0

A questo punto la tua risposta è molto più lunga della mia. Come mai? :-) –

+0

Mmm. Penso che lo stia facendo nel modo più duro –

1

Il modo più semplice è forse la buona ricerca lineare vecchio (si può fare binario, ma è più difficile del solito):

var target; 
var $options; 

var best=Infinity; 
var bestAt; 

$options.each(function(){ 
    var error = this.value - target; 
    error = error>0 ? error : -error; 
    if(error<=best){ 
    best=error; 
    bestAt=this; 
    } 
}) 

//return $(bestAt); 
+0

+1 per aver dedicato del tempo per pubblicare una risposta. – asprin

1

Se è possibile utilizzare jquery, farei qualcosa come

$(function() { 
     // comes from somewhere 
     var val = 7; 

     var sortByDifference = $("#blah option").sort(function (opt1, opt2) { 
      return Math.abs(parseInt($(opt1).val()) - val) - Math.abs(parseInt($(opt2).val()) - val); 
     }); 

     alert($(sortByDifference[0]).val()); 
    }); 

In sortByDifference tutti i valori sono ordinati in base alla vicinanza al valore. La routine restituisce il più vicino più grande o più basso e non richiede l'ordinamento delle opzioni.

+0

+1 per aver dedicato del tempo per pubblicare una risposta. – asprin

1
function findClosest(num){ 
    var select = document.getElementById('blah'); 
    var options = select.options; 
    var dif = Infinity; 
    var index; 
    for(var i = 0; i < options.length; i++){ 
     var newdif = Math.abs(parseInt(options[i].value) - num); 
     if(newdif < dif){ 
      dif = newdif; 
      index = i; 
     } 
    } 
    select.selectedIndex = index; 
} 
+0

Cosa significa "9007199254740992"? Ha un odore terribile :-) –

+0

Nota che il numero più piccolo tale che (x + 1 == x) non è l'infinito migliore. 2^53 ha un cattivo odore. –

+0

+1 per aver dedicato del tempo per pubblicare una risposta. – asprin

Problemi correlati