• 0 رای - 0 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5
قرار دادن checkbox درودن select
#1
با سلام ، به مثال زیر نگاه کنید
کد:
<select multiple="multiple" dropzone="copy">
   <option value="1"><input type="checkbox" name="1"/>1</option>
   <option value="2"><input type="checkbox" name="1"/>2</option>
   <option value="3"><input type="checkbox" name="1"/>3</option>
</select>
خروجی این بدین شکل هست که چکباکس بهمراه مقدار از لیست باکس خارجن.
من میخوام یه لیست از اطلاعات داشته باشم مثل لیست باکس و کنارش چکباکس باشه تا کاربر با علامت گذاری بتونه اونا رو انتخاب کنه
لطفا راهنمایی کنید اینو حل کنم . ممنون[/php]
  پاسخ
تشکر شده توسط :
#2
در html چنین تگی وجود نداره و باید خودت بوسیله ترکیب تگ ها و css و js بسازی
این یک نمونه

کد:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>

<style>
    .multiselect {
        width: 200px;
    }
    .selectBox {
        position: relative;
    }
    .selectBox select {
        width: 100%;
        font-weight: bold;
    }
    .overSelect {
        position: absolute;
        left: 0; right: 0; top: 0; bottom: 0;
    }
    #checkboxes {
        display: none;
        border: 1px #dadada solid;
    }
    #checkboxes label {
        display: block;
    }
    #checkboxes label:hover {
        background-color: #1e90ff;
    }
</style>

<script>
    var expanded = false;
    function showCheckboxes() {
        var checkboxes = document.getElementById("checkboxes");
        if (!expanded) {
            checkboxes.style.display = "block";
            expanded = true;
        } else {
            checkboxes.style.display = "none";
            expanded = false;
        }
    }
</script>
</head>

<body>

<form>
    <div class="multiselect">
        <div class="selectBox" onclick="showCheckboxes()">
            <select>
                <option>Select an option</option>
            </select>
            <div class="overSelect"></div>
        </div>
        <div id="checkboxes">
            <label for="one"><input type="checkbox" id="one"/>First checkbox</label>
            <label for="two"><input type="checkbox" id="two"/>Second checkbox </label>
            <label for="three"><input type="checkbox" id="three"/>Third checkbox</label>
        </div>
    </div>      

</form>

</body>
</html>


خودت میتونی کاملترش کنی
  پاسخ
تشکر شده توسط : moh3nmir


پرش به انجمن:


کاربران در حال بازدید این موضوع: 1 مهمان