jQuery Select2：如何为 multi-value 选择框添加占位符文本
jQuery Select2: How to add placeholder text for multi-value selectboxes
我正在使用 Select2 jQuery 插件处理 multi-value 选择框。这些文本框启用了标记，因此用户可以输入任意值。我使用 select2 选项设置了一个占位符，但它仅在选择框为空时可见。见下文。
空选择框，显示占位符：
选择框有值，无占位符：
我想要的是下图这样的东西。我想为搜索输入字段指定一个不同的占位符值，该值仅在选择框中包含值时才会显示。当Selectbox为空时，占位符将return到初始占位符值。
在事件 change.select2 中，您可以检查是否选择了 0 个以上的值，因此您可以将占位符重置为新值：
$('.js-example-basic-multiple').on('change.select2', function (e) {
if ($('.js-example-basic-multiple').val().length > 0) {
$('.js-example-basic-multiple').data('select2')['$container'].find(':input[type=search]')
.attr({placeholder: "Select a state again and again", style: 'width: 100%;'})
}
});
片段：
$('.js-example-basic-multiple').select2({
placeholder: "First selection....",
allowClear: false
});
$('.js-example-basic-multiple').on('change.select2', function (e) {
if ($('.js-example-basic-multiple').val().length > 0) {
$('.js-example-basic-multiple').data('select2')['$container'].find(':input[type=search]')
.attr({placeholder: "Select a state again and again", style: 'width: 100%;'})
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
<select class="js-example-basic-multiple js-states form-control select2-hidden-accessible" multiple=""
data-select2-id="select2-data-61-g4nr" tabindex="-1" aria-hidden="true" style="width: 100%;">
<optgroup label="Alaskan/Hawaiian Time Zone" data-select2-id="select2-data-66-rote">
<option value="AK" data-select2-id="select2-data-67-tgfy">Alaska</option>
<option value="HI" data-select2-id="select2-data-68-1ncw">Hawaii</option>
</optgroup>
<optgroup label="Pacific Time Zone" data-select2-id="select2-data-69-ey9b">
<option value="CA" data-select2-id="select2-data-70-cjom">California</option>
<option value="NV" data-select2-id="select2-data-71-qoj8">Nevada</option>
<option value="OR" data-select2-id="select2-data-72-q7yi">Oregon</option>
<option value="WA" data-select2-id="select2-data-73-ph4j">Washington</option>
</optgroup>
<optgroup label="Mountain Time Zone" data-select2-id="select2-data-74-wzgi">
<option value="AZ" data-select2-id="select2-data-75-86ql">Arizona</option>
<option value="CO" data-select2-id="select2-data-76-3mqr">Colorado</option>
<option value="ID" data-select2-id="select2-data-77-ry7y">Idaho</option>
<option value="MT" data-select2-id="select2-data-78-z7m6">Montana</option>
<option value="NE" data-select2-id="select2-data-79-2lte">Nebraska</option>
<option value="NM" data-select2-id="select2-data-80-xd5z">New Mexico</option>
<option value="ND" data-select2-id="select2-data-81-2wmh">North Dakota</option>
<option value="UT" data-select2-id="select2-data-82-0lmr">Utah</option>
<option value="WY" data-select2-id="select2-data-83-yeoz">Wyoming</option>
</optgroup>
<optgroup label="Central Time Zone" data-select2-id="select2-data-84-mr5y">
<option value="AL" data-select2-id="select2-data-85-l6br">Alabama</option>
<option value="AR" data-select2-id="select2-data-86-jpai">Arkansas</option>
<option value="IL" data-select2-id="select2-data-87-x0o2">Illinois</option>
<option value="IA" data-select2-id="select2-data-88-k0y3">Iowa</option>
<option value="KS" data-select2-id="select2-data-89-oki5">Kansas</option>
<option value="KY" data-select2-id="select2-data-90-ot5d">Kentucky</option>
<option value="LA" data-select2-id="select2-data-91-j93e">Louisiana</option>
<option value="MN" data-select2-id="select2-data-92-ljou">Minnesota</option>
<option value="MS" data-select2-id="select2-data-93-4cwz">Mississippi</option>
<option value="MO" data-select2-id="select2-data-94-4452">Missouri</option>
<option value="OK" data-select2-id="select2-data-95-hee9">Oklahoma</option>
<option value="SD" data-select2-id="select2-data-96-h9gh">South Dakota</option>
<option value="TX" data-select2-id="select2-data-97-q4kh">Texas</option>
<option value="TN" data-select2-id="select2-data-98-wps1">Tennessee</option>
<option value="WI" data-select2-id="select2-data-99-mdzk">Wisconsin</option>
</optgroup>
<optgroup label="Eastern Time Zone" data-select2-id="select2-data-100-iqi4">
<option value="CT" data-select2-id="select2-data-101-rkjk">Connecticut</option>
<option value="DE" data-select2-id="select2-data-102-ih1a">Delaware</option>
<option value="FL" data-select2-id="select2-data-103-4zkz">Florida</option>
<option value="GA" data-select2-id="select2-data-104-sdgj">Georgia</option>
<option value="IN" data-select2-id="select2-data-105-ulm1">Indiana</option>
<option value="ME" data-select2-id="select2-data-106-onok">Maine</option>
<option value="MD" data-select2-id="select2-data-107-qwwa">Maryland</option>
<option value="MA" data-select2-id="select2-data-108-j2v5">Massachusetts</option>
<option value="MI" data-select2-id="select2-data-109-uhro">Michigan</option>
<option value="NH" data-select2-id="select2-data-110-ui5e">New Hampshire</option>
<option value="NJ" data-select2-id="select2-data-111-yd0u">New Jersey</option>
<option value="NY" data-select2-id="select2-data-112-h33j">New York</option>
<option value="NC" data-select2-id="select2-data-113-7t3i">North Carolina</option>
<option value="OH" data-select2-id="select2-data-114-bc13">Ohio</option>
<option value="PA" data-select2-id="select2-data-115-lbm3">Pennsylvania</option>
<option value="RI" data-select2-id="select2-data-116-zgza">Rhode Island</option>
<option value="SC" data-select2-id="select2-data-117-kyou">South Carolina</option>
<option value="VT" data-select2-id="select2-data-118-npxe">Vermont</option>
<option value="VA" data-select2-id="select2-data-119-2ony">Virginia</option>
<option value="WV" data-select2-id="select2-data-120-xyi2">West Virginia</option>
</optgroup>
</select>
我正在使用 Select2 jQuery 插件处理 multi-value 选择框。这些文本框启用了标记，因此用户可以输入任意值。我使用 select2 选项设置了一个占位符，但它仅在选择框为空时可见。见下文。
空选择框，显示占位符：
选择框有值，无占位符：
我想要的是下图这样的东西。我想为搜索输入字段指定一个不同的占位符值，该值仅在选择框中包含值时才会显示。当Selectbox为空时，占位符将return到初始占位符值。
在事件 change.select2 中，您可以检查是否选择了 0 个以上的值，因此您可以将占位符重置为新值：
$('.js-example-basic-multiple').on('change.select2', function (e) {
if ($('.js-example-basic-multiple').val().length > 0) {
$('.js-example-basic-multiple').data('select2')['$container'].find(':input[type=search]')
.attr({placeholder: "Select a state again and again", style: 'width: 100%;'})
}
});
片段：
$('.js-example-basic-multiple').select2({
placeholder: "First selection....",
allowClear: false
});
$('.js-example-basic-multiple').on('change.select2', function (e) {
if ($('.js-example-basic-multiple').val().length > 0) {
$('.js-example-basic-multiple').data('select2')['$container'].find(':input[type=search]')
.attr({placeholder: "Select a state again and again", style: 'width: 100%;'})
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
<select class="js-example-basic-multiple js-states form-control select2-hidden-accessible" multiple=""
data-select2-id="select2-data-61-g4nr" tabindex="-1" aria-hidden="true" style="width: 100%;">
<optgroup label="Alaskan/Hawaiian Time Zone" data-select2-id="select2-data-66-rote">
<option value="AK" data-select2-id="select2-data-67-tgfy">Alaska</option>
<option value="HI" data-select2-id="select2-data-68-1ncw">Hawaii</option>
</optgroup>
<optgroup label="Pacific Time Zone" data-select2-id="select2-data-69-ey9b">
<option value="CA" data-select2-id="select2-data-70-cjom">California</option>
<option value="NV" data-select2-id="select2-data-71-qoj8">Nevada</option>
<option value="OR" data-select2-id="select2-data-72-q7yi">Oregon</option>
<option value="WA" data-select2-id="select2-data-73-ph4j">Washington</option>
</optgroup>
<optgroup label="Mountain Time Zone" data-select2-id="select2-data-74-wzgi">
<option value="AZ" data-select2-id="select2-data-75-86ql">Arizona</option>
<option value="CO" data-select2-id="select2-data-76-3mqr">Colorado</option>
<option value="ID" data-select2-id="select2-data-77-ry7y">Idaho</option>
<option value="MT" data-select2-id="select2-data-78-z7m6">Montana</option>
<option value="NE" data-select2-id="select2-data-79-2lte">Nebraska</option>
<option value="NM" data-select2-id="select2-data-80-xd5z">New Mexico</option>
<option value="ND" data-select2-id="select2-data-81-2wmh">North Dakota</option>
<option value="UT" data-select2-id="select2-data-82-0lmr">Utah</option>
<option value="WY" data-select2-id="select2-data-83-yeoz">Wyoming</option>
</optgroup>
<optgroup label="Central Time Zone" data-select2-id="select2-data-84-mr5y">
<option value="AL" data-select2-id="select2-data-85-l6br">Alabama</option>
<option value="AR" data-select2-id="select2-data-86-jpai">Arkansas</option>
<option value="IL" data-select2-id="select2-data-87-x0o2">Illinois</option>
<option value="IA" data-select2-id="select2-data-88-k0y3">Iowa</option>
<option value="KS" data-select2-id="select2-data-89-oki5">Kansas</option>
<option value="KY" data-select2-id="select2-data-90-ot5d">Kentucky</option>
<option value="LA" data-select2-id="select2-data-91-j93e">Louisiana</option>
<option value="MN" data-select2-id="select2-data-92-ljou">Minnesota</option>
<option value="MS" data-select2-id="select2-data-93-4cwz">Mississippi</option>
<option value="MO" data-select2-id="select2-data-94-4452">Missouri</option>
<option value="OK" data-select2-id="select2-data-95-hee9">Oklahoma</option>
<option value="SD" data-select2-id="select2-data-96-h9gh">South Dakota</option>
<option value="TX" data-select2-id="select2-data-97-q4kh">Texas</option>
<option value="TN" data-select2-id="select2-data-98-wps1">Tennessee</option>
<option value="WI" data-select2-id="select2-data-99-mdzk">Wisconsin</option>
</optgroup>
<optgroup label="Eastern Time Zone" data-select2-id="select2-data-100-iqi4">
<option value="CT" data-select2-id="select2-data-101-rkjk">Connecticut</option>
<option value="DE" data-select2-id="select2-data-102-ih1a">Delaware</option>
<option value="FL" data-select2-id="select2-data-103-4zkz">Florida</option>
<option value="GA" data-select2-id="select2-data-104-sdgj">Georgia</option>
<option value="IN" data-select2-id="select2-data-105-ulm1">Indiana</option>
<option value="ME" data-select2-id="select2-data-106-onok">Maine</option>
<option value="MD" data-select2-id="select2-data-107-qwwa">Maryland</option>
<option value="MA" data-select2-id="select2-data-108-j2v5">Massachusetts</option>
<option value="MI" data-select2-id="select2-data-109-uhro">Michigan</option>
<option value="NH" data-select2-id="select2-data-110-ui5e">New Hampshire</option>
<option value="NJ" data-select2-id="select2-data-111-yd0u">New Jersey</option>
<option value="NY" data-select2-id="select2-data-112-h33j">New York</option>
<option value="NC" data-select2-id="select2-data-113-7t3i">North Carolina</option>
<option value="OH" data-select2-id="select2-data-114-bc13">Ohio</option>
<option value="PA" data-select2-id="select2-data-115-lbm3">Pennsylvania</option>
<option value="RI" data-select2-id="select2-data-116-zgza">Rhode Island</option>
<option value="SC" data-select2-id="select2-data-117-kyou">South Carolina</option>
<option value="VT" data-select2-id="select2-data-118-npxe">Vermont</option>
<option value="VA" data-select2-id="select2-data-119-2ony">Virginia</option>
<option value="WV" data-select2-id="select2-data-120-xyi2">West Virginia</option>
</optgroup>
</select>