jQueryのドロップダウンボックス値を設定する方法

投稿日: 2019-11-05 2019-11-05
タグ: dropdown, jquery

単純な選択/ドロップダウンボックスで、id = “country”となります。

<select id="country">
   <option value="None">-- Select --</option>
   <option value="China">China</option>
   <option value="United State">United State</option>
   <option value="Malaysia">Malaysia</option>
</select>

{空} 1。選択したドロップダウンボックスの値を表示します。

$('#country').val();

{空} 2。ドロップダウンボックスの値を ‘China’に設定するには

$("#country").val("China");

{空} 3。ドロップダウンボックスの値を ‘United State’に設定するには

$("#country").val("United State");

{空} 4。ドロップダウンボックスの値を ‘Malaysia’に設定する。

$("#country").val("Malaysia");

{空} 5。ドロップダウンボックスで ‘United State’オプションを無効にする。

$("#country option[value='United State']").attr("disabled", true);

{空} 6。ドロップダウンボックスで[United States]オプションを有効にする。

$("#country option[value='United State']").attr("disabled", false);

jQueryの選択/ドロップダウンボックスの例

<html>
<head>
<title>jQuery select/dropdown box example</title>

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

</head>

<body>

<h1>jQuery select/dropdown box example</h1>

<script type="text/javascript">

  $(document).ready(function(){

    $("#isSelect").click(function () {

    alert($('#country').val());

    });

    $("#selectChina").click(function () {

    $("#country").val("China");

    });

    $("#selectUS").click(function () {

    $("#country").val("United State");

    });

    $("#selectMalaysia").click(function () {

    $("#country").val("Malaysia");

    });

    $("#disableUS").click(function () {

    $("#country option[value='United State']").attr("disabled", true);

    });

    $("#enableUS").click(function () {

    $("#country option[value='United State']").attr("disabled", false);

    });

  });
</script>
</head><body>

<select id="country">
<option value="None">-- Select --</option>
<option value="China">China</option>
<option value="United State">United State</option>
<option value="Malaysia">Malaysia</option>
</select>

<br/>
<br/>
<br/>

<input type='button' value='Display Selected' id='isSelect'>
<input type='button' value='Select China' id='selectChina'>
<input type='button' value='Select US' id='selectUS'>
<input type='button' value='Select Malaysia' id='selectMalaysia'>
<input type='button' value='Disable US' id='disableUS'>
<input type='button' value='Enable US' id='enableUS'>
</body>
</html>

リンク://wp-content/uploads/jQuery/jQuery-select-dropdown-box.html[デモを試してください]

dropdown

jquery

getdocs

13036