Jak programowo wybrać opcję wewnątrz zmiennej za pomocą jQuery

Question

powiedzmy mam tej zmiennej html, które zawierają te wybierz opcje:

var html = '<select>'+ 
      '<option value="10">10</option>'+ 
      '<option value="20">20</option>'+ 
      '</select>'; 

Jak programowo wybrać opcję, która jest wewnątrz zmiennej html tak kiedy dołączyć je do czegoś, na przykład

$(this).children('div').append(html); 

stanie się on tak:

<div> <!-- children div of the current scope --> 
    <select> 
    <option value="10" selected>10</option> 
    <option value="20">20</option> 
    </select> 
</div> 

Jak to jest możliwe?

---

edit: zmienna zawartość jest generowana z odległych miejsc i muszę zmienić wartość lokalnie zanim jest on dołączany do div. Stąd pytanie.

edytuj 2: przepraszam za zamieszanie, pytanie zostało zaktualizowane moją rzeczywistą sytuacją.

Answer 1

Można rzucić HTML do elementu jQuery i wybierz wartość w indeksie 0. Następnie można dodać go do DOM.

Oto prosta wtyczka jQuery do wybrania opcji według indeksu.

(function($) { 
 
    $.fn.selectOptionByIndex = function(index) { 
 
    this.find('option:eq(' + index + ')').prop('selected', true); 
 
    return this; 
 
    }; 
 
    $.fn.selectOptionByValue = function(value) { 
 
    return this.val(value); 
 
    }; 
 
    $.fn.selectOptionByText = function(text) { 
 
    this.find('option').each(function() { 
 
     $(this).attr('selected', $(this).text() == text);         
 
    }); 
 
    return this; 
 
    }; 
 
})(jQuery); 
 

 
var $html = $([ 
 
    '<select>', 
 
    '<option value="10">10</option>', 
 
    '<option value="20">20</option>', 
 
    '</select>' 
 
].join('')); 
 

 
$('#select-handle').append($html.selectOptionByIndex(0)); 
 
// or 
 
$html.selectOptionByValue(10); 
 
// or 
 
$html.selectOptionByText('10');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="select-handle"></div>

Answer 2

selected = „wybrany” będzie działać

var html = '<select>'+ 
      '<option value="10">10</option>'+ 
      '<option value="20" selected="selected">20</option>'+ 
      '</select>'; 

      $('#select_handle').append(html); 

Answer 3

domyślnie pierwszy opcję zostanie wybrany - jeśli chcesz zrobić na inny zestaw to tak przy użyciu indeksujak tylko select jest dołączone:

$('#select_handle option:eq(1)').prop('selected', true) 

(to wybiera druga opcja)

Zobacz demo poniżej:

var html = '<select>'+ 
 
      '<option value="10">10</option>'+ 
 
      '<option value="20">20</option>'+ 
 
      '</select>'; 
 
$('#select_handle').append(html); 
 
$('#select_handle option:eq(1)').prop('selected', true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="select_handle"></div>

Answer 4

Można to zrobić w jQuery użyciu funkcji .attr() i nth pseudo-selektor.

tak:

$("option:nth-child(1)").attr("selected", ""); 

Nadzieję, że to pomaga!:-)

Answer 5

po append, spróbuj $('#select_handle select').val("10"); lub 20 lub niezależnie od wartości chcesz wybrać

Answer 6

Można spróbować po prostu ustawiając wartość z listy rozwijanej do jednego chcesz „wybierz” - jak $("#select_handle select").val(a_value);

Na przykład, jeśli a_value ma wartość 30, doda potrzebny kod HTML do węzła DOM. Byłoby to moje zdanie:

$(function() { 
 
    var html = '<select>' + 
 
     '<option value="10">10</option>' + 
 
     '<option value="20">20</option>' + 
 
     '<option value="30">30</option>' + 
 
     '<option value="40">40</option>' + 
 
     '<option value="50">50</option>' + 
 
    '</select>'; 
 

 
    // set a value; must match a 'value' from the select or it will be ignored 
 
    var a_value = 30; 
 

 
    // append select HTML 
 
    $('#select_handle').append(html); 
 

 
    // set a value; must match a 'value' from the select or it will be ignored 
 
    $("#select_handle select").val(a_value); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<h2>select added below</h2> 
 
<div id="select_handle"> 
 
</div>