अल्वारो जेएस मुक्त उत्तर मेरे लिए एक शानदार शुरुआत थी, और मैंने वास्तव में वास्तव में जेएस-मुक्त उत्तर पाने की कोशिश की, जो अभी भी छवियों के साथ चयन से अपेक्षित सभी कार्यक्षमता को वितरित करता है, लेकिन दुखद रूप से घोंसले के शिकार के रूप में डाउन-फॉल था। मैं यहां दो समाधान पोस्ट कर रहा हूं; मेरा मुख्य समाधान जो जावास्क्रिप्ट की 1 पंक्ति का उपयोग करता है, और पूरी तरह से जावास्क्रिप्ट-मुक्त समाधान है जो किसी अन्य रूप में काम नहीं करेगा, लेकिन नौसेना मेनू के लिए उपयोगी हो सकता है।
दुर्भाग्य से कोड में थोड़ा सा दोहराव है, लेकिन जब आप सोचते हैं कि एक चयन क्या करता है तो यह समझ में आता है। जब आप किसी विकल्प पर क्लिक करते हैं तो यह उस पाठ को चयनित क्षेत्र में कॉपी करता है, अर्थात, 4 विकल्पों में से 1 पर क्लिक करने से 4 विकल्प नहीं बदले जाएंगे, लेकिन शीर्ष अब आपके द्वारा क्लिक किए गए एक को दोहराएगा। छवियों के साथ ऐसा करने के लिए जावास्क्रिप्ट की आवश्यकता होगी, orrrr ... आप प्रविष्टियों की नकल करते हैं।
मेरे उदाहरण में हमारे पास गेम (उत्पाद) की एक सूची है, जिसमें संस्करण हैं। प्रत्येक उत्पाद में विस्तार भी हो सकते हैं, जिसमें संस्करण भी हो सकते हैं। प्रत्येक उत्पाद के लिए हम उपयोगकर्ता को प्रत्येक संस्करण की एक सूची देते हैं यदि एक से अधिक चित्र और संस्करण विशिष्ट पाठ के साथ एक से अधिक हो।
<h4>@Model.Name</h4>
@if (Model.Versions.Count == 1)
{
<div class="rich-select-option-body pl-2">
<img src="@Model.Versions[0].ImageUrl" alt="">@Model.Versions[0].VersionName (@Model.Versions[0].Year)
</div>
}
else
{
<h5>Select the version</h5>
<div class="rich-select custom-select">
<div class="rich-select-dropdown">
@foreach (var version in Model.Versions)
{
<div class="rich-select-option">
<input type="radio" name="game" id="game-@version.ProductId-@version.VersionId" @if (version == Model.Versions.First()) { @Html.Raw(" checked") ; } />
<div class="rich-select-option-body">
<label tabindex="-1">
<img src="@version.ImageUrl" alt="">@version.VersionName (@version.Year)
</label>
</div>
</div>
}
</div>
<input type="checkbox" id="rich-select-dropdown-button" class="rich-select-dropdown-button" />
<label for="rich-select-dropdown-button"></label>
<div class="rich-select-options">
@foreach (var version in Model.Versions)
{
<div class="rich-select-option">
<div class="rich-select-option-body">
<label for="game-@version.ProductId-@version.VersionId" tabindex="-1" onclick="document.getElementById('rich-select-dropdown-button').click();">
<img src="@version.ImageUrl" alt=""> @version.VersionName (@version.Year)
</label>
</div>
</div>
}
</div>
</div>
}
चेकबॉक्स के चयन के लिए जेएस का उपयोग करने से हमारे पास एक फॉर्म में कई उदाहरण हो सकते हैं। यहाँ मैंने विस्तार की एक सूची दिखाने के लिए विस्तार किया है, जिसमें संस्करणों के आसपास भी एक ही तर्क है।
<h5 class="mt-3">Include Expansions?</h5>
@foreach (var expansion in Model.Expansions)
{
<div class="form-row">
<div class="custom-control custom-checkbox w-100">
<input type="checkbox" class="expansion-checkbox custom-control-input" id="exp-@expansion.ProductId">
<label class="custom-control-label w-100" for="exp-@expansion.ProductId">
@if (expansion.Versions.Count == 1)
{
<div class="rich-select-option-body pl-2">
<img src="@expansion.ImageUrl" />@expansion.Name: @expansion.Versions[0].VersionName (@expansion.Versions[0].Year)
</div>
}
else
{
<div class="rich-select custom-select">
<div class="rich-select-dropdown">
@foreach (var version in expansion.Versions)
{
<div class="rich-select-option">
<input type="radio" name="exp-@version.ProductId" id="exp-@version.ProductId-@version.VersionId" @if (version == expansion.Versions.First()) { @Html.Raw(" checked") ; } />
<div class="rich-select-option-body">
<label tabindex="-1">
<img src="@version.ImageUrl" alt="">@expansion.Name: @version.VersionName (@version.Year)
</label>
</div>
</div>
}
</div>
<input type="checkbox" id="rich-select-dropdown-button-@expansion.ProductId" class="rich-select-dropdown-button" />
<label for="rich-select-dropdown-button-@expansion.ProductId"></label>
<div class="rich-select-options">
@foreach (var version in expansion.Versions)
{
<div class="rich-select-option">
<div class="rich-select-option-body">
<label for="exp-@version.ProductId-@version.VersionId" tabindex="-1" onclick="document.getElementById('rich-select-dropdown-button-@expansion.ProductId').click();">
<img src="@version.ImageUrl" alt="">@expansion.Name: @version.VersionName (@version.Year)
</label>
</div>
</div>
}
</div>
</div>
}
</label>
</div>
</div>
बेशक इसके लिए सीएसएस की एक उचित बिट की आवश्यकता होती है, जिसे मैंने केवल इस JSField में शामिल किया है ताकि पहले से ही बड़े पैमाने पर उत्तर के आकार को कम किया जा सके। मैंने बूटस्ट्रैप 4 का उपयोग आवश्यक राशि को कम करने के लिए किया है, और इसे अन्य बूटस्ट्रैप नियंत्रणों और किसी भी साइट अनुकूलन के साथ फिट करने की अनुमति देने के लिए भी किया है।
छवियों को 75px पर सेट किया गया है, लेकिन इसे आसानी से 5 लाइनों में .rich-selectऔर में बदला जा सकता है.rich-select-option-body img
