Credevo che le variabili dichiarate esternamente al metodo bind() non fossero visibili al suo interno
Dipende. Non so cosa tu abbia provato.
Ad ogni modo puoi risolvere in diversi modi.
Partiamo dal fatto che per una programmazione da manuale sarebbe opportuno creare delle funzioni distinte per ogni particolare azione.
In tal caso puoi creare una funzione (chiamata sul change e sul ready) in cui esegui la chiamata ajax, e un'altra funzione che associ al success della stessa chiamata ajax, in cui aggiorni gli elementi sulla pagina.
Ti posto uno script di esempio (molto schematico):
codice:
<!DOCTYPE HTML>
<html>
<head>
<title>Esempio</title>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){ // lo stesso che $(document).ready(function(){
// funzione di ricerca
function cerca(){
// qui la tua chiamata ajax
// al success puoi richiamare la funzione di aggiornamento della pagina
aggiornaPagina($('.test').val())
};
// funzione di aggiornamento degli elementi della pagina
function aggiornaPagina(idVoce){
// varie manipolazioni sulla select ecc...
$(".risultato").val(idVoce);
}
$('.test').change(cerca); // handler sul change di test
cerca(); // avvio la ricerca all'apertura della pagina in modo da forzarne l'aggiornamento
})
</script>
</head>
<body>
<select class="test">
<option value="1" selected>Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<select class="risultato">
<option value="1">Value 1</option>
<option value="2">Value 2</option>
<option value="3">Value 3</option>
</select>
</body>
</html>
La select risultato è aggiornata in base alla scelta della select test.
E' chiaro che tutto il procedimento può essere minimizzato con l'uso di funzioni generiche (cioè create al volo).
In tal caso puoi eseguire un trigger dell'evento change, ad apertura pagina, in modo che sia forzato l'aggiornamento iniziale.
Lo stesso procedimento con lo script "minimizzato":
codice:
<!DOCTYPE HTML>
<html>
<head>
<title>Esempio</title>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
$('.test').change(function(){ // handler sul change di test, avvia la ricerca
// qui la tua chiamata ajax
// al success esegui l'aggiornamento della pagina
$(".risultato").val($('.test').val()); // varie manipolazioni sulla select ecc...
}).change(); // innesco il change all'apertura della pagina in modo da forzarne l'aggiornamento
})
</script>
</head>
<body>
<select class="test">
<option value="1" selected>Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<select class="risultato">
<option value="1">Value 1</option>
<option value="2">Value 2</option>
<option value="3">Value 3</option>
</select>
</body>
</html>