यदि उपयोगकर्ता चयन करता है तो मैं सरणी में केवल 5 आइटम प्रदर्शित करने के लिए एक ईवेंट श्रोता जोड़ना चाहता हूं उदाहरण: एचटीएमएल फॉर्म में विकल्प 5 का चयन करें।

const Array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]


<select class="form-select" aria-label="Default select example">
            <option value="1">5</option>
            <option value="2">10</option>
          </select>

संपादित करें: मैं एक सूची में सरणी दिखा रहा हूँ। मुझे एक उपयोगकर्ता इनपुट मिल रहा है और नीचे की तरह ली दिखा रहा है।

Array.forEach((item) => {
      let button = document.createElement('button');
      button.className =
        'list-group-item';
      button.innerText += item;
      List.appendChild(button);
 });
0
Babadinho 11 जुलाई 2021, 20:11

4 जवाब

सबसे बढ़िया उत्तर
const Array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

const selectBox = document.querySelector(".form-select");
const List = document.getElementById("itemList");

function applySelection() {
  let selectedOption = selectBox.options[selectBox.selectedIndex].text;
  let output = []
  for (i = 0; i < selectedOption; ++i) {
    output.push(Array[i])
  }
  List.innerHTML = ''
  output.forEach((item) => {
    let button = document.createElement('button');
    button.className = 'list-group-item';
    button.innerText += item;
    List.appendChild(button);
  });
}

selectBox.addEventListener("change", applySelection);
applySelection()
<select class="form-select" aria-label="Default select example">
  <option value="1">5</option>
  <option value="2">10</option>
</select>

<div id="itemList"></div>
0
Rui Costa 11 जुलाई 2021, 17:54
    <select class="form-select" onChange=onChange={(e) =>
                  applyFilters(e.target.value)
                } aria-label="Default select example">
                <option value="1">5</option>
                <option value="2">10</option>
</select>

प्रतिक्रिया घटक में->

 applyFilters(let length){
    const filteredArray = wholeArray.slice(0, length) 
    setState(filteredArray)
 }
0
Mohit Gupta 11 जुलाई 2021, 17:23

तो यहां आपके पास एक उदाहरण है कि आप क्या कर सकते हैं ..

var arr =  [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]


var event = document.getElementsByClassName('form-select')

var count = 5; 
 

event[0].addEventListener('change',function(e){
  count = e.target.value
  displayList()
})


function displayList(){
  
var itemList =   document.getElementById('itemList')
itemList.innerHTML ="";
  for( var i = 0; i < count; i++){
    itemList.innerHTML += arr[i]
    
  }
}
displayList()
<select class="form-select" aria-label="Default select example">
            <option value="5">5</option>
            <option value="10">10</option>
          </select>
  
  
  <div id="itemList"></div>
0
Stefan Avramovic 11 जुलाई 2021, 17:33

आप इस तरह आसानी से onChange का उपयोग कर सकते हैं! आशा है कि यह अब आपकी मदद करेगा।

<script type="text/javascript">
function jsFunction(value)
{
    const list = ['apple', 'banana', 'orange', 'strawberry']
    const items = list.slice(0, value)
    alert(items);
    
    const numbers = ['1', '2', '3', '4', '5','6', '7', '8', '9', '10']
    
    const items2 = numbers.slice(0, value)
    alert(items2);
}
</script>

<select id ="ddl" name="ddl" onmousedown="this.value='';" onchange="jsFunction(this.value);">
  <option value='1'>One</option>
  <option value='2'>Two</option>
  <option value='3'>Three</option>
  <option value='5'>5</option>
  <option value='10'>10</option>
</select>
0
Divyesh_08 11 जुलाई 2021, 17:46