如何从下拉列表中选择一个值，然后单击提交，然后在 div 部分的同一页面中打印值，进一步 div 也可以使用按钮？

Question

如何从下拉列表中选择一个值，然后单击提交，然后在 div 部分的同一页面中打印值，然后 div 与进一步所需的按钮编码配合良好？

我试过警报但没有成功我想在同一页面上打印下拉选择值的完整详细描述。 以及该印刷说明上的进一步按钮也有效。

<?php 
function checkdropdown() {
      if(document.getElementById('select').value != "") {
        return true;
      }
      else {
        return false;
      }
    }
?>

<form action='file.php' action='post'>
      <select name='select' id='select'>
        <option value=''>Select an option</option>
        <option value='1'>1</option>
        <option value='2'>2</option>
        <option value='3'>3</option>
        <option value='4'>4</option>
        <option value='5'>5</option>
        <option value='6'>6</option>
        <option value='7'>7</option>
        <option value='8'>8</option>
      </select>
    <input type='submit' onClick='if(!checkdropdown()) {alert("You need to select a value!"); return false;}' value='Submit form' />
    </form>

Answer 1

请检查以下代码：

<div id="divtouse">This is the value which you have selected:-  </div>

    <form >
          <select name='select' id='select'>
            <option value=''>Select an option</option>
            <option value='1'>1</option>
            <option value='2'>2</option>
            <option value='3'>3</option>
            <option value='4'>4</option>
            <option value='5'>5</option>
            <option value='6'>6</option>
            <option value='7'>7</option>
            <option value='8'>8</option>
          </select>
        <input type='submit'  onClick='if(!checkdropdown()) {alert("You need to select a value!"); return false;}' value='Submit form' />
    </form>

Javascript代码

<script>
        function checkdropdown() {
        if(document.getElementById('select').value != "") {
                return true;
        }
        else {
            return false;
        }
        }
        var select = document.getElementById('select');
        select.onchange = function() 
        {
            document.getElementById("divtouse").textContent="This is the value which you have selected:- "+select.value;
        }
</script>

Answer 2

请检查以下。

<div id="divtouse"> This is the Div to place html </div>
<form action='file.php' action='post'>
    <select name='select' id='select'>
        <option value=''>Select an option</option>
        <option value='1' data-desc="long description 1">1</option>
        <option value='2' data-desc="long description 2">2</option>
        <option value='3' data-desc="long description 3">3</option>
        <option value='4' data-desc="long description 4">4</option>
        <option value='5' data-desc="long description 5">5</option>
        <option value='6' data-desc="long description 6">6</option>
        <option value='7' data-desc="long description 7">7</option>
        <option value='8' data-desc="long description 8">8</option>
    </select>
    <input 
        type='submit'
        onClick='if(!checkdropdown()) {
            alert("You need to select a value!"); return false;
        }'
        value='Submit form' 
    />
</form>

Javascript代码：

function checkdropdown() {
    if(document.getElementById('select').value != "") {
        var selectval = document.getElementById('select').value;

        var sel = document.getElementById('select');
        var selected = sel.options[sel.selectedIndex];
        var long_description= selected.getAttribute('data-desc');


        var htmldiv = '<p>'+long_description+'</p><input type="button" value="Vlick Button" onclick="divbtnsubmit('+selectval+')" />';
        document.getElementById('divtouse').innerHTML = htmldiv;
        return true;
    } else {
        return false;
    }
}

function divbtnsubmit(selectedvalue) {
    //you can do button functionality in the div stuffs here.
}